2016年4月21日

[TOC]

2016年4月21日

SASS

安装

第一步：移动默认的源

gem sources --remove https://rubygems.org/

第二步：指定淘宝的源

gem sources -a https://ruby.taobao.org/

第三步：查看指定的源是不是淘宝源

gem sources -l

删除Sass

gem uninstall sass

Sass 和 SCSS

• 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

• 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

命令编译

单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

多文件编译：

sass sass/:css/

开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

变量声明

• 声明变量的符号“$”

• 变量名称

• 赋予变量的值

如果值后面加上!default则表示默认值。

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7

全局变量与局部变量

//SCSS
$color: orange !default;
//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

嵌套

• 选择器嵌套

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

编译后

nav a {
  color:red;
}

header nav a {
  color:green;
}

• 属性嵌套

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

编译后：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

• 伪类嵌套

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

编译后：

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

声明混合宏

在 Sass 中，使用“@mixin”来声明一个混合宏。如：

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

调用：

button {
    @include border-radius;
}

编译出来的 CSS:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

在混合宏中，可以传一个不带任何值的参数，在调用的时候可以给这个混合宏传一个参数值：

.box {
  @include border-radius(3px);
}

继承

在 Sass 中是通过关键词 @extend来继承已存在的类样式块，从而实现代码的继承。

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

编译后：

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;
  @extend %pt5;
}

因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码

//SCSS中混合宏使用
@mixin mt($var){
  margin-top: $var;  
}

.block {
  @include mt(5px);

  span {
    display:block;
    @include mt(5px);
  }
}

.header {
  color: orange;
  @include mt(5px);

  span{
    display:block;
    @include mt(5px);
  }
}

//SCSS 继承的运用
.mt{
  margin-top: 5px;  
}

.block {
  @extend .mt;

  span {
    display:block;
    @extend .mt;
  }
}

.header {
  color: orange;
  @extend .mt;

  span{
    display:block;
    @extend .mt;
  }
}

//SCSS中占位符的使用
%mt{
  margin-top: 5px;  
}

.block {
  @extend %mt;

  span {
    display:block;
    @extend %mt;
  }
}

.header {
  color: orange;
  @extend %mt;

  span{
    display:block;
    @extend %mt;
  }
}