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 许可协议。转载请注明出处!
 评论