sass使用教程

Sass

Sass与Scss区别：

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

Sass语法例子：

$font-stack: sans-serif 
$primary-color: #123 
​
body
  font: 100% $font-stack
  color: $primary-color

Sass语法例子：

$font-stack: sans-serif;
$primary-color: #123;
​
body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译结果：

body {
  font: 100% sans-serif;
  color: #123;
}

Sass 转义CSS

Koala ，CodeKit ，如用Webpack可通过下载 ：

npm install --save-dev sass-loader

npm install --save-dev node-sass

在build文件夹下的webpack.base.conf.js的rules里面添加以下配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

Sass 的变量包括三个部分：

1. 声明变量的符号“$”

2. 变量名称

3. 赋予变量的值

$width:300px //$表示1   width表示2   300表示3

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

/* 如果之前没有赋值,则使用默认值 */
$const: "a" !default;
div{
    const: $const;
}

​

编译为CSS：

div {
  const: "a"; 
}

如果在此之前已经赋值，那就不再使用默认值:

/* 如果之前已经赋值,则不再使用默认值 */
$const: "a";
$const: "b" !default;
​
div{
    const: $const;
}
​

编译为CSS：

div {
  const: "a"; 
}

全局变量/局部变量

$color: orange ;
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

编译为CSS：

.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

Sass 的嵌套分为三种：

• 选择器嵌套

• 属性嵌套

• 伪类嵌套

选择器嵌套：

CSS写法：

nav a {
  color:red;
}
​
nav a b {
  color:black;
}
nav {
  a {
    color: red;
    b{
      color:black;
    }
  }  
}

属性嵌套：

CSS写法

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

Sass写法

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

伪类嵌套：

CSS写法

.a:hove{
  color:black
}

Sass写法

.a{
  &:hover {
   color:black
   }
}

声明混合宏

不带参数混合宏:

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

带参数混合宏：

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

复杂的混合宏：

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

调用混合宏

定义：

@mixin border-radius{
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

使用：

button {
    @include border-radius;
}

编译结果CSS：

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

传一个不带值的参数

定义：

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

使用：

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

编译结果CSS：

.box {
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

传一个带值的参数

定义：

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

使用：

.aa {
  @include border-radius;
}

编译结果CSS：

.aa {
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

传多个参数

定义：

@mixin center($width,$height){
  width: $width;
  height: $height;
}

使用：

.box{
  @include center(50px,50px);
}

编译结果CSS：

.box {
  width: 50px;
  height: 50px;
}

扩展/继承

定义/使用：

.a {
  border: 1px solid #abc;
  padding: 3px;
  font-size: 12px;
}
​
.aa{
  color: #fff;
  @extend .btn;
}
​

编译结果CSS：

.a, .aa {
 border: 1px solid #abc;
  padding: 3px;
  font-size: 12px;
}
.aa {
  color: #fff;
}

占位符 %placeholder

定义/使用：

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

插值#{}

定义/使用

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

编译结果CSS：

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

注释：

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示

//定义一个占位符
​
%mt5 {
  margin: 5px;
}

​
/*调用一个占位符*/

.aa {
  @extend %mt5;
}

编译结果CSS：

.aa {
  margin: 5px;
}
​
/*调用一个占位符*/

算法

加法 :如果不是相同单位会报错

.aa {
  width: 20px + 10px;
}

编译结果CSS：

.aa {
  width: 30px;
}

减法：如果不是相同单位会报错

$a: 100px;
$b: 20px;
​
.c {
  width: $a -  $b;
}

​

编译结果CSS：

.c {
  width: 80px;
}

乘法：两个值单位相同时，只需要为一个数值提供单位

.aa {
  width: 10px * 2;
}

编译结果CSS：

.aa {
  width: 20px;
}

除法：

.aa {
  width: (100px / 2);  
}
.aa {
  width: 50px;
}

变量计算：

$a: 10px;
$b: 10px;
.c {
  width: $a + $b 
}

编译结果CSS：

.c {
  width: 20px;
}

数字计算：

.aa {
  width: ((20+ 10) - 10 * 20 ) / 2 ;  
}

编译结果CSS：

.aa {
  width: 200px;
}

颜色计算：0+1，0+1，0+1，1+2，1+2，1+2

p {
  color: #000111 + #111222;
}
p {
  color: #111333;
}

字符计算：

$aa: "a" + "b";
.c {
  box: " #{$aa} ";
}
.c {
  box: "ab";
}