Sass学习
预处理器Sass的功能
Variable
用$variable
语法表示一个变量,一般在文件顶部定义并存放一个数值或颜色值。
Nesting
通过indent/tab嵌套多种选择器实现父子样式继承。
Partials
Partials就是文件名以下划线开头的SCSS文件,类似_patrial.css
。Partials一般不直接被预处理器编译为css,而是被import到主要的scss文件后,与主文件一同被编译。
Import
使用@import
语法把所有Partials文件导入主文件。
Mixins
使用@mixin
语法包裹可多次重复利用的代码块,一般结合Varibales一起使用,实现一个基本的传参函数。
Extend
使用@extend
语法实现样式的继承与自定义,适用情况类似于要设计一组颜色各异的button,extend来的是通用button样式,而extend语法本身的样式明确各个颜色。
Operators
在scss文件中使用基本数学运算。
终端使用sass命令compile文件
基本步骤与命令
新建一个.scss
文件,例如名为style.scss
,编辑内容并储存。
在终端先进入该.scss
文件所在文件夹,然后执行sass style.scss:style.css
。冒号后面的内容就是输出文件名。
执行完成后当前列表新增除了.scss
文件以外的三个文件,分别是a source map(.css.map
),a regular .css
file,a sass.cache
directory.
修饰命令
如果需要实时对.scss
文件的修改同步编译到.css
文件,可以使用sass —watch
命令。
压缩.css
文件,使输出的css文件能够更快加载。--style compressed
命令。
如何组织一个SCSS项目
sass主文件夹下有:
- base文件夹,用于存放全局varibales以及mixins,文件名都是以下划线开头的Partials。
- components文件夹,用于存放依据组件需求生成的样式表,文件名都是以下划线开头的Partials。
- main.scss文件,用于将所有子文件夹中的partials都import
最后sass
命令编译的对象是整个main.scss文件。输出到与sass文件夹同层级的css文件夹下的.css
文件即可。
- 本文标题:Sass学习
- 本文作者:徐徐
- 创建时间:2020-12-19 11:13:48
- 本文链接:https://machacroissant.github.io/2020/12/19/learn-sass/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
评论