本文是在 平台 学习 Sass过程中的笔记,仅用于个人备忘,方便复习和查阅。若有侵权问题,请联系sfg1991@163.com删除


Sass, Syntactically Awesome StyleSheets (优秀的基于语法的样式表)。

目的:编写干净整洁、简明易读的样式代码,减少重复、冗余,降低维护难度

Sass的语法称为SCSS (Sassy CSS) syntax。使用时,将SCSS转换/编译成CSS:sass <input> <output>

主要特性:

  • Nests 嵌套/级联
  • Variables 变量
  • Selctors Inheritance 选择器
  • Mixins 混合

Nesting 嵌套

Nesting makes code more efficient by eliminating repetition and showing the clear DOM relationship in styling.

样式表与DOM结构对应,易读;消除重复、冗余。

  1. // Sass (源码)
  2. .parent {
  3. color: blue;
  4. .child {
  5. font-size: 12px;
  6. }
  7. }
  8. ->
  9. // CSS (转译后)
  10. .parent {
  11. color: blue;
  12. }
  13. .parent .child {
  14. font-size: 12px;
  15. }

Varaiable 变量

Variables improve readability and maintainability.

避免重复,降低维护难度,提高易读性。

  1. // 以$开头
  2. $translucent-white: rgba(255,255,255,0.3);

Sass(y) Types 类型

  • Colors 颜色, #fffrgb(255, 255, 255)rgba(255, 255, 255, 0.3)
  • Numbers 数字, 8.121314px
  • Strings 字符串,"potato"'tomato', span
  • Booleans 布尔值,truefalse
  • null 空,空值(empty value)
  • Lists 表列,以空格或逗号分隔,5em Helvetica boldHelvetica, Arial, sans-serif
  • Maps 映射,(key1: value1, key2: value2),具体的例子:
  1. @mixin dashed-border($width, $color: #FFF) {
  2. border: {
  3. color: $color;
  4. width: $width;
  5. style: dashed;
  6. }
  7. }
  8. div {
  9. @include dashed-border(color: purple, width: 5px);
  10. }

Selectors 选择器

& 选择器

In Sass, the & character is used to specify exactly where a parent selector should be inserted. It also helps write psuedo classes in a much less repetitive way.

用于指定父级选择器的插入位置,有助于以较少的重复来编写样式类。

  1. // Sass
  2. .text {
  3. color: blue;
  4. &:hover {
  5. color: red;
  6. }
  7. }
  8. ->
  9. // CSS
  10. .text {
  11. color: blue;
  12. }
  13. .text:hover {
  14. color: red;
  15. }

更多&用法请看Mixins中的 &

Mixin 混合(集合)

对样式进行组合(Group)。减少重复。

Mixin names and all other Sass identifiers use hyphens and underscores interchangeably

Mixin的名字以及其他Sass标识符中,连字符(-)和下划线(_)是可互相替换的(等同的)。例如:backside-color等同于backside_color

  1. // decalare
  2. @mixin backface-visibility($visibility) {
  3. backface-visibility: $visibility;
  4. -webkit-backface-visibility: $visibility;
  5. -moz-backface-visibility: $visibility;
  6. -ms-backface-visibility: $visibility;
  7. -o-backface-visibility: $visibility;
  8. }
  9. // use
  10. .front {
  11. color: #fff;
  12. @include backface-visibility
  13. }

Mixins: Arguments 参数

  1. // declare
  2. @mixin backface-visibility($visibility) {
  3. backface-visibility: $visibility;
  4. // ... eliminated
  5. }
  6. // use
  7. @include backface-visibility(hidden);

Default Value Arguments 参数默认值

  1. // declare
  2. @mixin backface-visibility($visibility hidden) {
  3. backface-visibility: $visibility;
  4. // ... eliminated
  5. }
  6. // use default value
  7. @include backface-visibility;
  8. // or use a new value
  9. @include backface-visibility(visible);

Facts about Mixins & Aruguments 其他特性

  1. Mixins can take multiple arguments. 支持多参数
  2. Sass allows you to explicitly define each argument in your @include statement. 调用(引用)时赋值
  3. When values are explicitly specified you can send them out of order. 可以打乱赋值顺序
  4. If a mixin definition has a combination of arguments with and without a default value, you should define the ones with no default value first. 先给没有默认值的参数赋值
  5. Mixins can be nested. 支持嵌套
  1. @mixin dashed-border($width, $color: #FFF) {
  2. border: {
  3. color: $color;
  4. width: $width;
  5. style: dashed;
  6. }
  7. }
  8. span { // only passes non-default argument
  9. @include dashed-border(3px);
  10. }
  11. p { // passes both arguments
  12. @include dashed-border(3px, green);
  13. }
  14. div { // passes out of order but explicitly defined
  15. @include dashed-border(color: purple, width: 5px);
  16. }

Mixins中的Lists和Maps参数

调用(引用,@include)时,须在变量后面加标点...

  1. // declare mixin
  2. @mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  3. background: repeating-linear-gradient(
  4. $direction,
  5. $stripe-background,
  6. $stripe-background ($width-percent - 1),
  7. $stripe-color 1%,
  8. $stripe-background $width-percent
  9. );
  10. }
  11. // declare Lists variable
  12. $college-ruled-style: (
  13. direction: to bottom,
  14. width-percent: 15%,
  15. stripe-color: blue,
  16. stripe-background: white
  17. );
  18. // use
  19. .definition {
  20. width: 100%;
  21. height: 100%;
  22. @include stripes($college-ruled-style...);
  23. }

String Interpolation 字符串插补

在两个字符串之间插入一个变量的值。语法:#{$variable}.

  1. // Sass
  2. @mixin photo-content($file) {
  3. content: url(#{$file}.jpg);
  4. object-fit: cover;
  5. }
  6. .photo {
  7. @include photo-content('titanosaur');
  8. width: 60%;
  9. margin: 0px auto;
  10. }
  11. // CSS
  12. .photo {
  13. content: url(titanosaur.jpg);
  14. width: 60%;
  15. margin: 0px auto;
  16. }

Mixins中的 &

  1. The & selector gets assigned the value of the parent at the point where the mixin is included.
    在被引用的地方,与父级选择器一起生成选择器并设定样式。
  2. If there is no parent selector, then the value is null and Sass will throw an error.
    如果没有父级选择器,等同于null,Sass会抛出错误。
  1. // declare
  2. @mixin text-hover($color){
  3. &:hover {
  4. color: $color;
  5. }
  6. }
  7. // use mixin
  8. .word {
  9. text-align: center;
  10. @include text-hover(red);
  11. }
  12. // generated CSS
  13. .word{
  14. text-align: center;
  15. top: 40%;
  16. }
  17. .word:hover{
  18. color: red;
  19. }

Notice that the mixin inherited the parent selector .word because that was the parent at the point where the mixin was included. 注意,mixin继承了父级选择器.word,因为那是mixin被引用(@include)的地方。

Functions and Operations 函数、操作

用于样式的计算(computing)和重复(iterating)。使用Sass函数,可以:

  • Operate on color values 操作颜色值
  • Iterate on lists and maps 迭代Lists和Maps
  • Apply styles based on conditions 不同条件下应用不同样式
  • Assign values that result from math operations 不同操作下设定不同值

Arithmetic and Color 颜色相关计算

关于alpha透明度的函数计算

  • fade-out 增加透明度 (更透明)
  1. color: rgba(39, 39, 39, 0.5);
  2. $amount: 0.1;
  3. $color2: fade-out($color, $amount); // rgba(39, 39, 39, 0.4)
  • fade-in 减少透明度 (更不透明)
  1. $color: rgba(55,7,56, 0.5);
  2. $amount: 0.1;
  3. $color2: fade-in($color, $amount); // rgba(55,7,56, 0.6)
  • adjust-hue($color, $degrees) 色盘旋转

颜色的算术计算

颜色的算术计算规则:
  1. 按Red、Green、Blue分组进行计算
  2. 每两位数字为一组:
  1. $color: #010203 + #040506;
  2. ->
  3. 01 + 04 = 05
  4. 02 + 05 = 07
  5. 03 + 06 = 09
  6. ->
  7. $color: #050709;

表达式中直接写red blue等也是可以的: color: red + blue;

算术符
  1. addition + 加
  2. subtraction - 减
  3. multiplication * 乘
  4. division / 除
  5. modulo % 取模
注意事项
  1. 运算数的单位要匹配,不能: px + em
  2. 按照算术规则,单位也会运算: 10px * 10px = 100 px2
/ 除法 or 分隔符

/ 在以下情况下是除法运算符:

  1. If the value, or any part of it, is stored in a variable or returned by a function. 值是变量
  2. If the value is surrounded by parentheses, unless those parentheses are outside a list and the value is inside. 值在括号里面(Lists情况除外)
  3. If the value is used as part of another arithmetic expression. 值是其他表达式的一部分
  1. width: $variable / 6; // division, 1
  2. line-height: (600px) / 9; // division, 2
  3. margin-left: 20 - 10 px / 2; // division, 3, 先计算减法
  4. font-size: 10px/8px; // not division

Each Loops 循环

变量值替换。在selector和key中用#{$item},在value中可以直接用$item

  1. // Sass
  2. $list: (orange, purple, teal);
  3. @each $item in $list {
  4. .#{$item} {
  5. background: $item;
  6. #{$item}: $item; // 此句无意义,仅为演示#{$item}可以用在key中
  7. }
  8. }
  9. ->
  10. // CSS
  11. .orange {
  12. background: orange;
  13. orange: orange;
  14. }
  15. .purple {
  16. background: purple;
  17. purple: purple;
  18. }
  19. .teal {
  20. background: teal;
  21. teal: teal;
  22. }

To be continued

其他注意事项

  1. 在可读性和书写更少的代码之间,前者更重要。