Sass的笔记

唯小南
194 阅读1分钟

根据Sass官网和阮一峰老师的笔记，自己记录一下

Sass官网：sass.bootcss.com/guide

SASS用法指南 - 阮一峰的网络日志：www.ruanyifeng.com/blog/2012/0…

CSS 本身可能很有趣，但是样式表正变得越来越大、 越来越复杂、越来越难以维护。这就是预处理可以提供帮助的地方。 Sass 为你提供了 CSS 中还不存在的特性，例如变量、 嵌套、混合、继承和其它实用的功能，让编写 CSS 代码变得再次有趣。

webpack中使用Sass

1.安装依赖

  • sass-loader
  • node-sass
  • css-loader
  • style-loader / mini-css-extract-plugin

2.配置rules

{
  test: /\.scss$/,
  use: [
    'style-loader',
    // MiniCssExtractPlugin.loader
    'css-loader',
    'sass-loader'
  ]
}

sass语法使用

变量

变量是存储信息并在将来重复利用的一种方式，在整个样式表中都可访问

变量存储的是值，不是整个样式，只是一个值（冒号后面的内容 : ）

Sass 使用 $ 符号 作为变量的标志，可以使用变量来指定值

如果变量的值是作为css选择器的一部分要使用 #{$变量名}

变量命名和值 支持驼峰和划线

$red: #F00;
$mg20: 20px;
// 使用
.red {
  color: $red;
  background-color: $red;
  margin-top: $mg20;
}
// 变量作为样式选择器

$span: span;
$one-class-name: item-name;
$itemDetail: itemDetail;
#{$one-class-name} { 
  // 作为选择器命名  
  background-color: yellowgreen;
}
#{$itemDetail} {
  padding: $mg20;  // 变量名可以随意命名，不影响结果，但应该对应真实的意思
}
#{$span} 
{  
  color: red;
}

插入文件

@import命令，用来插入外部文件

@import './head.sass'

嵌套

Sass 允许您嵌套 CSS 选择器，嵌套方式 与 HTML 的视觉层次结构相同

但嵌套多层会导致样式代码难以维护，层数不要过度

在嵌套的代码块内，可以使用&引用父元素

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    &:hover {
      color: #ffb3ff;
    }
  }
}

混合（Mixins）

mixin允许创建一组CSS声明，在整个样式表中重用这些声明，特别是样式前缀时

mixins有点类似于函数，可以接收参数，先声明好一些样式，等重用时传入需要的参数，就可以返回想要的样式，参数可以有缺省值

用法：

使用@mixin声明样式 后面用括号接收参数（没有参数可以不要括号）

@mixin 声明的名称 (参数) {......} // (参数) 可以没有  使用参数和要变量一样用法

使用@include重用样式 后面用括号传参（没有参数可以不要括号）

// @include 声明的名称 （参数）; // (参数) 可以没有 类似函数一样传参

// 预设好前缀
@mixin transform($property) {  
  -webkit-transform: $property;  
  -ms-transform: $property;  
  transform: $property;
}
.box {  
  @include transform(rotate(30deg));
}
// 默认值
$yellow: #cfcf6f;
@mixin color($value: red) {  
  background-color: $property;  
  color: $property;
}
.item {
  @include color;
}

继承（Extend）

Sass允许一个选择器，继承另一个选择器，这样可以简化编码时对公用的样式的编写

继承是一些公用样式复用的简写

编译后会自动按照继承的关系，转换成选择器的公用样式

.class1 {
  border: 1px solid #ddd;
}
.class2 {
  @extend .class1;
  font-size:120%;
}
// 转换成css
.class1, .class2 {
 border: 1px solid #ddd; // 因为.class2继承.class1 说明.class1的内容是两个选择器公用的内容
}
.class2 {
  font-size:120%; // 编译转换后 就会根据继承关系组装了上面这个公用样式
}

如果只是想定义一些公用样式，不想生成实际的选择器，可以使用%来编写占位符类和extend配合使用

占位符类是用于创建简单消息传递，当它被继承才会打印，利用打印的特性来生成css样式，如果没有被继承，里面的内容就不会输出

%message-shared {
  // 占位符类  里面这些样式内容 当它被继承后就会输出  生成共用样式
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
// 这个占位符类因为没有被其它地方 使用过 生成css时就不会输出它的内容
%equal-heights {
  display: flex;
}
.message {
    @extend %message-shared;}
.success {  
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}
// 转换成css.message {
  @extend %message-shared;
}
.success {  
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}
// 转换成css
// 占位符类如果有输出就会在原来sass文件里面的位置输出成继承的选择器样式
.message, .success, .error {
  // 内容生成了共用的样式 没有产生额外的选择器
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}

颜色函数

Sass提供了一些内置的颜色函数，以便生成系列颜色

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%)// #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

计算功能、操作符

$var: 100;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}
// 10%  %在数值后面是作为单位使用 不是 10%  百分之10的意思
// right: $var * 10%; // 等价于 right: (100 * 10)%;  => right: 1000%;
// 所以不能用 100px * 10% => 1000%*px 会报错

条件语句

@if可以用来判断、还有@else命令

.item {
  @if lightness(red) > 50% {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
}

循环语句

@for @for $i from 1 to 10

@for $i from 1 to 10 {
  .a#{$member} {
     content: "#{$member}";
  }
}
// 转换后
.a1 { content: "1" }
.a2 { content: "2" }
...

@while @while $i > 0

$i: 6;@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}
// 转换后
.item-6 {
  width: 12em;
}
.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

@each @each $var in $itemList // 或者  @each $member in a, b, c, d

@mixin item-1 ($value, $key) {
  @each $var in $key {
    #{$var}: $value;
  }
}
.item-class {
  @include item-1($red, color background-color border-color);
}
// 转换后
.item-class {
  color: red;
  background-color: red;
  border-border: red;
}

自定义函数

用 @function 和 @return

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

小结

官网上面和阮一峰老师的例子就是这些，目前实际中接触到Sass用法比较少，使用较多的是语法：$变量、@import、嵌套、操作符，其它的用法先做记录，后面使用时方便查找

avatar
文章
阅读
粉丝