CSS预处理器,你还是只会嵌套么 ?

·  阅读 3532
CSS预处理器,你还是只会嵌套么 ?

前言

大佬:CSS预处理器有用过么?
我:嗯嗯,用过SASS的嵌套。
佬:没了?
我:...(尬住了)

不知道大家情况是不是和我一样,前车之鉴,CSS相关知识还是挺重要的。
本文带大家一起整理CSS预处理器知识点,现有流行库有Sass(Scss)LessStylus等,我项目中主要还是用Sass, 所以本文例子都是以Sass(Scss)为基础。

Sass基础

CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSS。

变量

变量的提供,避免设计师频繁更改某一全局属性(比如整体颜色风格),导致我们被动增加工作量。
使用变量以$开头,有全局变量局部变量

$color: #8a8787; // 全局变量
div { 
  $width: 100px; // 局部变量
  width: $width;
  background: $color;
}
复制代码

若变量用在属性中,需要写在#{ }

$side: left;
div { 
  border-#{$side}: 1px solid $color;
}
复制代码

嵌套

这应该是最熟悉的。😘除了选择器可以嵌套,属性伪类也可嵌套。

<div class="parent-container">
   <div class="parent-container-header"></div>
</div>
复制代码
.parent-container {
   &-header {  // 选择器嵌套
     background {
       color: red;   //属性嵌套
     }
     &:hover {  // 伪类嵌套
       color: green;
     }
   }
}
复制代码

继承

允许一个选择器,继承另一个选择器所有的属性。用@extend继承已存在的样式块。

.class1 {
  border: 1px solid #ddd;
}
.class2 {
  @extend .class1;
  font-size: 12px;
}
复制代码

混合

类似Vue的混入,是可以重用的样式代码,且可指定参数和默认值,运用@mixin使用如下。

@mixin left($value: 10px) {
  float: left;
  margin-left: $value;
}
div {
  @include left(4px);
}
复制代码

@import

用来引入外部样式文件

@import "文件相对路径"
复制代码

注意:不建议使用import,因 import 的 CSS 文件只有在当前 CSS 文件被下载、解析完成之后,浏览器才会开始下载 import 的 CSS 文件,破坏了并行下载样式文件。

注释

有两种方式 /*注释*///注释

颜色函数

内置颜色函数,便于生成系列颜色。

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

Sass运算

加减乘除

Sass可以做各种数学计算(变量和属性)。加减需注意必须相同单位除法需要带括号

$height: 10px;
div {
  width: 10px + 10px;
  height: $height + 10px;
  margin-top: 20px -10px;
  margin-left: 10px * 2;
  margin-right: (10px / 2);
}
复制代码

字符运算

运用+做拼接字符串

div:before {
 content: "hello" + "world";
}
复制代码

Sass命令

@if

JS类似,可用于混入mixin,根据参数判断。

@mixin isHidden($bool: true) {
  @if $bool {
    display: block;
  }
  @else {
    display: none;
  }
}
复制代码

循环

可帮助生成类似选择器,如定义一些类似的外边距margin。有@for@while@each

@for $i from 1 to 10 {
  .margin-#{$i} {
    left: #{$i}px;
  }
}
复制代码
$i: 6;
while $i > 0 {
  .margin-#{$i} {
    left: #{$i}px;
  }
  $i: $i - 1;
}
复制代码
@each $item in a, b, c, d {
  .#{${member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
复制代码

Sass函数

自定义函数

@function double($d) {
  @return $d * 2
}
div {
  width: double(2px);
}
复制代码

自带函数

Sass提供类似如字符串函数(Strings)、数字函数(Numbers)、列表函数(Lists)、字典函数(Maps)等。
字符串函数有unquote用来删除字符串引号、quote用来添加引号。
数字函数类似Math提供如roundceilfloorabs等。
列表函数有length($list)返回列表长度等。
这里就不再一一列举,更多地是知道大概提供什么,后续可以去官网找。

image.png

总结

CSS预处理器如果想更好地使用,与设计师小姐姐先沟通好,能发挥更大的作用😉。

参考

Sass-学习笔记[基础篇]
Sass用法指南
Sass命令及函数知识整理

分类:
前端
标签:
分类:
前端
标签: