个人学习-SASS

描述：

CSS预处理器，扩展语言。

优势：

SASS新增了很多复用机制，方便编写和维护样式。

安装：

npm install -g sass

具体内容

1. 变量

使用规则：$variablename: value;

注意$符号。

$myBoxColor:red; //定义变量

//使用变量
body{
  color:$myBox;//使用变量-将body的文字颜色设置为red。
}

设置全局变量：!global

 background:$myBox !global;

注意： 全局变量文件，如： _globals.scss，然后我们使用 @include 来包含该文件。

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

2. 嵌套规则与属性

• 嵌套选择器

<div class='content'>
  <div class='li'></div>
</div>
//嵌套规则
.content {
  .li{
  }
}

• 嵌套属性

// font-size:12px;
font: {
  size:12px;
}

// text-align:center;
text: {
  align:center;
}

3. @import与 Partials

• @import

导入sass样式表：@import filename;

文件后缀无需输入 scss ，自动识别添加。

@import "variables";  
@import "colors";  
@import "reset";

• Sass Partials

只需要被导入的文件 _filename;

若不想将一个sass文件编译到一个css文件，使用Sass Partials

假如 _app.scss 文件：

$myColor:red;

导入该文件：不需要输入下划线，直接导入

@import "app";
font-size:12px;
color:$myColor;

注意： 请不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。

4. @mixin 与 @include

混入（定义重复使用的样式）： @mixin

使用混入（使用样式）： @include

//定义混入
@mixin red-color {
   font-size:12px;
   color:red;
}

//使用混入
.box {
   @include red-color;
   background-color:green;
}

//混入中包含混入
@mixin bgc-blue {
   @include red-color;
   background-color:blue;
}

//混入中传参
@mixin box-add($color, $width) {
   border: $width soild $color;
}
.myBox{
    @include box-add(red,12px);//调用混入，并传入两个参数
}

//可变参数:当无法确定传参个数时，使用... 来设置可变参数。
@mixin red-box(@shadows...) {
   box-shadow: $shadows;
}
.shadows {
   @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

5. @extend 与 继承

一个选择器继承另一个选择器的样式（重复部分） @extend 代码的复用

.button-basic  {  
  border: none;  
  cursor: pointer;  
}  
.button-report  {  
  @extend .button-basic;  
  background-color: red;  
}  

6. 父选择器&

用 & 代表嵌套规则外层的父选择器

a {
  font-weight:bold;
  //a:hover
  &:hover{
     text-decoration: underline;
  }
}

引用来源：菜鸟教程 SASS教程

侵权删。