标签：main port 支持 了解 scss 结构 ref 此刻 监视
第一次写博, 不好之处请多多包含
工欲善其事必先利其器, 首先, 我们要先了解下什么是CSS预处理器
In my opinion, CSS预处理器中的"预", 我们可以理解为"将要", 一个将要去处理CSS的工具, 那么他这里面应该包含有变量, 嵌套, 混入, 继承, 逻辑运算, 导入, 函数, 运算符等程序设计功能, 那么拥有一系列编码逻辑的功能, 肯定能够减少代码的冗余性, 提升可维护性等, 因此, CSS预处理器应该是一个具备程序设计特点的CSS语言.
目前比较主流的CSS预处理器有: less, sass, stylus, 他们的扩展名分别是.less .scss .styl
这里我们只讨论SASS
先扔一个官网: https://www.sass.hk/docs/ 具体语法官网更详细, 这里就不再浪费笔墨了, 只总结下学习过程中遇到的坑.
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
说完了环境搭建, 下面我们来聊聊语法
嵌套功能避免了重复输入父选择器
// .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结合使用, 而@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理解为定义一个函数, 既然是函数, 肯定少不了参数这个概念
无默认值情况, 无默认值情况下, 该传不传, 编译会出错
// .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; }
// .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; }
首先要知道, @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; }
这次先写到这先吧..
撤了, 撤了
标签：main port 支持 了解 scss 结构 ref 此刻 监视
原文地址：https://www.cnblogs.com/george-es/p/9384574.html
