第一次写博, 不好之处请多多包含
工欲善其事必先利其器, 首先, 我们要先了解下什么是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;
}
这次先写到这先吧..
撤了, 撤了
原文地址：https://www.cnblogs.com/george-es/p/9384574.html