学习sass小结(不定期更新补充...)

Posted 2020-12-26 george-es

　　第一次写博, 不好之处请多多包含

 

　　工欲善其事必先利其器, 首先, 我们要先了解下什么是CSS预处理器

　　In my opinion, CSS预处理器中的"预", 我们可以理解为"将要", 一个将要去处理CSS的工具, 那么他这里面应该包含有变量, 嵌套, 混入, 继承, 逻辑运算, 导入, 函数, 运算符等程序设计功能, 那么拥有一系列编码逻辑的功能, 肯定能够减少代码的冗余性, 提升可维护性等, 因此, CSS预处理器应该是一个具备程序设计特点的CSS语言.

　　目前比较主流的CSS预处理器有: less, sass, stylus, 他们的扩展名分别是.less .scss .styl

　　这里我们只讨论SASS

　　先扔一个官网: https://www.sass.hk/docs/  具体语法官网更详细, 这里就不再浪费笔墨了, 只总结下学习过程中遇到的坑.

• 环境搭建和sass的使用

　　sass工具的下载和安装官网已经非常详细了, 这里不再阐述.

　　使用上, 特别是初学者, 比较推荐通过监视sass文件的方式来学习, 这条命令类似热加载, 编写完能立刻知道转换成css后的样式

　　注意: 通过_开头的scss文件, 系统会认为@import文件, 将不会输出对应的css文件

// 监视单个 Sass 文件，每次修改并保存时自动编译 sass --watch input.scss:output.css //其中input.scss是源文件 output.css是输出文件 // 监视整个文件夹 sass --watch source_file:aim_file //source_file源文件夹 aim_file目标文件夹 若想表示当前目录用

　　想了解更多关于sass命令, 在命令行中使用sass --help

　　说完了环境搭建, 下面我们来聊聊语法

 

• 嵌套规则: 将一套CSS样式嵌套进另一套样式中, 内层的样式将它外层的选择器作为父选择器.

　　嵌套功能避免了重复输入父选择器

// .scss
#main {
  color: red;      
  .p { color: green; }
} 
 
// 编译后.css
#main { color:red; }
#main .p { color: green; }

• 父选择器&

　　我们在使用嵌套时候会遇到一个难题, 如果想要为某个元素设定hover样式时, 使用嵌套:hover前会出现一个空格, 这不是我们预期的效果

　　或者当body元素有某个classname时, 可以用&代表嵌套规则未曾的父选择器

　　例:

//.scss
a {
    color: red;  
    :hover { color: green; }  
    body .firefox { font-weight: normal }
}

//.css
a { color: red;}
a :hover { color: green; }      // a和:hover之间有个空格, 不是我们预期的结果
a body .firefox { font-weight: normal } // 我们是想要把a放在.firefox后面的

　　此时&登场了

//.scss
a {
    color: red;  
    &:hover { color: green; }  
    body .firefox & { font-weight: normal }
}

//.css
a { color: red;}
a:hover { color: green; }      
body .firefox a { font-weight: normal } 

• 注释

　　现在有个需求, 期望编译后的css文件中不要存在太多的注释, 毕竟这段代码要上线的, 而源文件中保留注释, 可以方便我们维护, 那么, 在Sass中提供了一套注释机制, 支持标准的CSS多行注释/* */, 以及单行注释// 前者会被完整的输出到编译后的CSS文件中, 后者不会.

• @mixin和@include

　　@mixin可以理解为输入,  他和@include结合使用,  而@include理解为输出, 即将@mixin定义的内容插入到@include引用的地方.

// .scss
// 通过@mixin定义一个公共内容
@mixin center-block{
   margin-left: auto;
   margin-right: auto;    
}

// 通过@include插入到样式中
#header {
   width: 1000px;
   @include center-block;
}

// .css
#header {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

• @mixin的参数和默认值

　　之前开头说了, 预编译器是具有程序设计功能的, 我们可以将@mixin理解为定义一个函数, 既然是函数, 肯定少不了参数这个概念

　　无默认值情况, 无默认值情况下, 该传不传, 编译会出错

// .sass
@mixin float($float){
    float: $float;
}

#header {
    @include float(left)   //传left参数
}

//.css
#header {
    float: left;
}

　　带默认值

// .sass
@mixin float($float: left){     // 定义参数left
    float: $float;
}

#header {
    @include float(right)        //传right参数
}

//.css
#header {
    float: right;
}

• @mixin多个属性, 在变量后面加...可为一个变量定义多个参数值

// .sass
@mixin box($shadow) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;  
}

.shadow-box1 {
    @include box(1px 1px 1px red);    //这个可正常编译
}
.shadow-box2 {
    @include box(1px 1px 1px red, inset 3px 3px 3px green); //编译报错, 原因在于, 这里只定义了一个参数值
}

//  若要让这条编译通过, 只需在$shadow后加...
@mixin box($shadow...) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;  
}

 

• @mixin之@content

　　首先要知道, @content是应用在@mixin里面的

　　当没有@content的时候, 我们所有的样式都是在@mixin中定义好的, @include引用了这段样式, 但是@content的到来改变了这一规则, 他的作用是定义选择器, 可以理解为当@content存在时, 将@include中的内容插入到@content中

// .scss
@mixin box {
  #box1 { @content; }    // 此刻将@include 中的结构块插入到@content中, @content和@include的结构块是相辅相成的, 结构块理解为{}中内容
}

@include box {     
  width: 100px;
  height: 200px;
}

// .css
#box1 {
  width: 100px;
  height: 200px;  
}

 

 

这次先写到这先吧..

撤了, 撤了