Sass 特性
需要先去官网查看并下载 Sass,最好去读官网的内容,文章也只是总结,很多细节需要去官网看,mac 推荐用 brew,Sass 为 css 预处理器,当写好了 Sass 代码,运行 Sass 相关命令就可以 Sass 写法的代码转化为 普通css 代码.
Sass 命令
监视Sass 的某个文件或某个文件夹的文件 save 的时候将其转化为 css 文件
sass --watch input.scss output.css
sass --watch app/sass:public/stylesheets
Sass 特性
-
变量
-
$变量名:css code
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
-
-
嵌套
-
像 html 一样嵌套写法
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
-
-
局部文件
- 局部 scss 文件名称中要带有_前缀,下划线让 Sass 知道该文件只是部分文件,不应该生成到 CSS 文件中
- 配合@use 使用,里面包含一些 css 片段,可被多个文件使用
-
模块
-
Scss 文件配合@use可导入局部文件,允许你使用其中的变量,混合,方法,和js 的 import 相似.
@use 'base'; .inverse { background-color: base.$primary-color; color: white; }
-
-
混合
-
@mixin theme($theme: DarkGray) { background: $theme; box-shadow: 0 0 1px rgba($theme, .25); color: #fff; }
-
.success { @include theme($theme: DarkGreen); } .info { @include theme; }
-
通过@minxin定义 minxin 和 @include使用,minxin支持编写可重复的 css 声明组,使代码保持干净
-
-
扩展/继承
-
%message-shared { border: 1px solid #ccc; padding: 10px; color: #333; }
-
.message { @extend %message-shared; } .error { @extend %message-shared; border-color: red; }
-
@extend 可以将一组 CSS 属性从一个选择器共享到另一个选择器。占位符类是一种特殊类型的类选择器,它只在扩展时打印.
-
-
运算
-
@use "sass:math"; article[role="main"] { width: math.div(600px, 960px) * 100%; } aside[role="complementary"] { width: math.div(300px, 960px) * 100%; margin-left: auto; }
-
Sass 允许简单的数学操作,+,-,*,%,math.div
-