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

Posted george-es

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习sass小结(不定期更新补充...)相关的知识,希望对你有一定的参考价值。

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

 

  工欲善其事必先利其器, 首先, 我们要先了解下什么是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;  
}

 

 

这次先写到这先吧..

撤了, 撤了

以上是关于学习sass小结(不定期更新补充...)的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli 创建项目小结 - 钩子(不定期更新)

Sass学习笔记(补充)

电赛知识补充——电机篇

JNA C语言与Java类型转换(不定期更新)

Flutter学习资源汇总(不定期更新)

Flutter学习资源汇总(不定期更新)