Sass快速基本使用手册

什么是sass?

www.sass.hk/docs/

是一款强化css的辅助工具，在css语法基础上，增加了 变量variables,嵌套nested rules, 混合mixins, 导入inline import

有哪些功能?

完全兼容CSS3，在CSS基础上增加变量，嵌套，混合等功能，通过函数进行颜色值与属性值的运算,提供控制指令等高级功能，自定义输出格式

语法格式

SCSS:这种语法格式仅在CSS3的语法的基础上进行扩展，所以CSS3在SCSS种都是通用的，同时加入Sass的特色功能

SASS:被称为缩进格式，简称Sass，是一种简化格式。使用缩进代表花括号表示属性属于某个选择器。用换行代替分号分割属性。

安装使用(nodejs环境中使用)

npm install sass --save-dev
// 运行
sass styles.scss styles.css
// 监听文件变化并自动变易
sass --watch styles.scss:styles.css

可以在package.json中定义一个运行sass的脚本

"scripts": {
  "build:sass": "sass styles.scss styles.css",
  "watch:sass": "sass --watch styles.scss:styles.css"
}

执行命令

npm run build:sass
npm run watch:sass

SassScript

SassScript是Sass中的编译语言部分，它使Sass不仅仅是一个样式表预处理器，还能通过变量，运算符，函数等编写动态的样式规则。SassScript提供了一些功能来增强CSS，使得样式更加灵活和可重用

变量：使用变量$key:value

$primary-color: #3498db;
$padding: 16px;
​
body {
  background-color: $primary-color;
  padding: $padding;
}

父选择器：在嵌套css规则时，有时也需要直接使用嵌套外层的父亲选择器。例如给某个元素设定hover样式时

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

$必须作为选择器的第一个字符，其后可以跟随后缀生成的复合选择器

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
#main {
  color: black;
}
#main-sidebar {
 border: 1px solid; 
}

运算符：支持数学运算符(+, -, *, /),可以对数值，颜色，字符串进行计算

$width: 100px;
​
.container {
  width: $width / 2;  // 50px
}

嵌套：允许样式规则的嵌套，嵌套使得样式层次更加清晰

// 普通
.navbar{
    background:#f5f5f5;
}
.navbar ul{
    list-style:none;
}
.navbar ul li{
    display:inline-block;
}
// 嵌套
.navbar{
    background:#f5f5f5;
    ul{
        list-style:none;
        li{
            display:inline-block;
        }
    }
}
​

有些属性遵循相同的命名空间，比如font-size,font-family都以font作为属性的命名空间。避免重复代码，不会生成无用css,提高代码可维护性

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

插值：允许通过#{}进行插值，将变量或者表达式的值插入到选择器，属性名和属性值中

$side: left;
div {
  border-#{$side}-radius: 5px;  // 生成 border-left-radius
}

函数：Sass提供了内置函数库，如颜色函数lighten,darken等，还可以自定义函数

$base-color: #3498db;
$light-color: lighten($base-color, 20%);
​
body {
  background-color: $light-color;
}

自定义函数示例

@function double($n) {
  @return $n * 2;
}
.container {
  width: double(5px); // 10px
}

控制指令和循环：Sass支持@if,@else if,@each,@while等逻辑控制语句

$theme: dark;
body {
  @if $theme == light {
    background-color: white;
  } @else if $theme == dark {
    background-color: black;
  } @else {
    background-color: gray;
  }
}
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

Mixin混合器：@mixin,@include用于复用代码，可以将常用的样式封装成mixin,然后在多个地方调用

@mixin混合器指令，@include用来应用这些定义的样式

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
​
button {
  @include border-radius(5px);
}

占位符选择器：占位符选择器使用%定义，使用占位符选择器不会直接生成对应的css,占位符样式可以通过@extend被其他选择继承，从而实现样式复用

%button-style {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  color: white;
  background-color: blue;
}
// 使用占位符选择器
.button-primary {
  @extend %button-style;
  background-color: blue;
}
​
.button-secondary {
  @extend %button-style;
  background-color: gray;
}

数据类型：sassScript支持6种主要数据类型

• 数字，1，2，3px

• 字符串，有引号字符串和无引号字符串

• 颜色，blue,#04217f,rgba(255,0,0,0)

  p {
    color: #010203 + #040506;
  }
  p {
    color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
  }
  01 + 04 = 05 02 + 05 = 07 03 + 06 = 09
  p {
    color: #050709;
  }
  p {#
    color: rgba(255, 255, 0, 0.75);
  }
  

• 布尔值，true,false,

• 空值，null

• 数组，list,用空格或者逗号作为分隔符，1.5em 1em 0 2em, Helvetica,Arial,sans-serif

• maps，相当于js的object,(key1: value1, key2: value2)

定义变量!default: !default是一种标识符，用于设置变量的默认值。作用是仅当变量未被先前定义时，才为其赋值。如果变量已经定义，!default将不会覆盖原有的值，这对于创建可复用的样式库，主题或框架非常有用

// 如果用户在他们的代码中没有定义$primary-color，则使用blue，如果定义了blue不会覆盖定义的值
​
// 定义默认颜色
$primary-color: blue !default;
​
// 如果用户定义了 $primary-color，这里不会覆盖
$primary-color: red; // 这里会覆盖之前定义的默认值
​
.button {
  background-color: $primary-color;
}
​

@-Rules与指令

@-rules是指@开头的规则或者指令，用于控制样式的行为，配置，条件逻辑以及导入文件等。SCSS扩展了CSS的@-rules： @import;@mixin;@include;@function;@extend;@if,@else if,@else;@for;@each;@while;@media;@supports;@use;@forward;

@import: 用于将外部文件或库导入到当前的SCSS文件中，支持导入SCSS文件，CSS 文件以及部分库文件

@import 'base'; // 导入 base.scss 或 base.css

@mixin: 定义可复用的样式代码块，可以在多个地方调用，类似于函数

@mixin button-style {
  padding: 10px;
  border-radius: 5px;
  background-color: blue;
}
.btn {
  @include button-style; // 使用 mixin
}
​

@include: 调用@mixin中定义的代码块

@include button-style;

@function: 定义可以返回值的自定义函数，与@mixin类似，但专注于返回一个值，而非一段样式

@function add($a, $b) {
  @return $a + $b;
}
.box {
  width: add(10px, 20px); // 结果是 30px
}

@extend：继承现有选择器的样式，可以减少重复代码，但是要小心选择器扩展过多会导致CSS文件膨胀的问题

.btn {
  padding: 10px;
  background-color: blue;
}
.primary-btn {
  @extend .btn; // 继承 .btn 的所有样式
  font-weight: bold;
}

@if,@elseif, @else: 条件判断，允许根据不同的条件生成不同的样式

$theme: dark;
​
.box {
  @if $theme == light {
    background-color: white;
  } @else if $theme == dark {
    background-color: black;
  } @else {
    background-color: gray;
  }
}

@for循环用于生成多组样式

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100px * $i;
  }
}
​

@each: 用于遍历列表或映射，并生成对应的样式

$colors: red, blue, green;
​
@each $color in $colors {
  .btn-#{$color} {
    background-color: $color;
  }
}

@while:创建循环，直到某个条件为false为止

$i: 1;
​
@while $i < 4 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

@media: 与CSS中的@media类似，但SCSS可以嵌套使用,用于应用特定条件下的样式，通常用于响应式设计，根据不同设备的特性，动态调整样式，从而优化页面在不同设备上的表现

@media <媒体类型> and (<媒体特性>) {
  适用的CSS规则
}

媒体类型：指定了特定的设备

all 所有设备(默认值)
screen 电脑屏幕，手机，平板等屏幕设备
print 打印机输出时的样式
speech 用于屏幕阅读器设备

媒体特性：

width 视口宽度
height 视口高度
min-width 视口最小宽度
max-width 视口最大宽度
max-height
min-height
orientation 屏幕方向，portrait竖屏，landscape横屏
resolution 设备分辨率

// 默认样式
.container {
  width: 100%;
  padding: 20px;
}
​
// 当屏幕宽度大于等于 768px 时，应用不同的样式
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
    padding: 40px;
  }
}
​

@supports: 检测浏览器是否支持某些CSS特性，然后根据检查结果应用不同的样式

@supports (display: grid) {
  .grid-container {
    display: grid;
  }
}