0. 什么是Sass
Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间：
- Sass 引入合理的样式复用机制，可以节约很多时间来重复。
- 支持变量和函数，利用代码简洁。
有两种文件后缀名，.sass和.sccs区别在于前者用缩进代替了后者的{}和分号，建议用sccs后续来书写sass代码
- sass，不使用大括号和分号。
- scss，与css文件格式差不多，使用大括号和分号（推荐）。
1. 在React中使用
- 正常使用
# 安装
cnpm install --save-dev sass
# 新建文件
App.scss
.button{
color:red
}
# js中使用
import "./Index.scss";
<div className={color}></div>
- 模块使用
# 安装
npm install --save-dev css-loader style-loader
# 新建文件
App.scss
.button{
color:red
}
# js中使用
import styles from './App.scss'
<div className={styles.button></div>
还需要配置webpack.config.js
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]', // 修改CSS类名的生成格式
},
},
},
'postcss-loader', // 如果有其他的CSS预处理器，比如autoprefixer，可以在此添加
],
}
这东西语法并不难，基本2小时就学会了。
2. 基本语法
基本数据
- 数字，1, 2, 13, 10px
- 字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz
- 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型，true, false
- 空值，null
- 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
.item{
width:100%;
background:#ffffff;
line-height:40px;
}
注释
- 单行注释： / / css文件里不会显示 压缩方式的css不会显示
- 多行注释： /**/ css文件里会显示 压缩方式的css不会显示
- 强制注释：/* ! */ css文件里会显示 压缩方式的css会显示
/*
多行注释
*/
//单行注释
运算
所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。
- 数字：数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。 关系运算 <, >, <=, >= 也可用于数字运算；
.box {
width: 50px + 50px;
height: 100px - 50px;
margin-top: 10px * 10; // 这里不能两个都带单位，否则是100px*px这种不合法的值
padding-top: (100px / 2) ;// css会将/认为是合法的，所以需要加括号
}
- 颜色：颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。例如 #010203 + #040506，则计算 01 + 04 = 05、02 + 05 = 07、03 + 06 = 09，结果为#050709；
.color1{
color: #010120 + #234234;
}
.color2{
color: #010120 * 2;
}
.color3{
color: rgba(250, 0, 0, 0.75) + rgba(5, 255, 0, 0.75);
}
- 字符：有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
.string1:before{
font-family: icon + font ;
content: "带引号字符串" + 不带引号字符串;
}
.string2:before{
font-family: icon + font ;
content: 不带引号字符串 + "带引号字符串";
}
// -------------生成的css代码-------------
.string1:before {
font-family: iconfont;
content: "带引号字符串不带引号字符串";
}
.string2:before {
font-family: iconfont;
content: 不带引号字符串带引号字符串;
}
- 布尔： 支持布尔型的 and or 以及 not 运算。
.bool1:before{
content: $bool and false;
}
.bool2:before{
content: $bool or false;
}
.bool3:before{
content: not $bool;
}
// -------------生成的css代码-------------
.bool1:before {
content: false; }
.bool2:before {
content: true; }
.bool3:before {
content: false; }
嵌套.和&
- 选择器嵌套
.grandpa {
width: 200px;
height: 200px;
.father {
width: 100px;
height: 100px;
}
}
// -------------生成的css代码-------------
.grandpa {
width: 200px;
height: 200px;
}
- 父级选择器 &
.grandpa .father {
width: 100px;
height: 100px;
}
.box {
a {
&:hover {
color: red;
}
}
}
// -------------生成的css代码-------------
.box a:hover {
color: red;
}
上述这些用法和原生的.css文件基本没啥区别
3. 复用相关
$和#变量定义
- 变量
$dark: #000;
$side: left;
.box {
color: $dark;
}
.box2 {
background: $dark;
border-#{$side}-radius: 5px;
}
- 插值
$selectName:'.foo';
$attrName:'width';
$content: "content内容";
#{$selectName}:before {
#{$attrName}:12px;
content: "#{$content}";
}
// -------------生成的css代码-------------
.foo:before {
width: 12px;
content: "content内容"; }
@function自定义函数
$width : 400;
$multiple: 2;
@function app_width($width,$multiple){
@return $width * $multiple px;
}
#app{
width: app_width($width,$multiple);
}
// -------------生成的css代码-------------
#app { width: 800 px; }
@mixin和@include复用
// 定义一个mixin
@mixin box-style {
width: 200px;
height: 200px;
background: #000;
}
// 使用
.box {
@include box-style;
// 当然也可以继续在这里添加样式
border-radius: 5px;
}
// -------------生成的css代码-------------
.box {
width: 200px;
height: 200px;
background: #000;
border-radius: 5px;
}
- 带参数
$box-width: 200px;
$box-height: 200px;
// 定义一个mixin
@mixin box ($width, $height) {
width: $width;
height: $height;
}
// 使用
.box {
// 1. 第一种用法, 直接将css样式写入
@include box(200px, 200px);
// 2. 第二种, 将定义好的变量写入
@include box($box-width, $box-height);
}
// -------------生成的css代码-------------
.box {
width: 200px;
height: 200px;
}
@extend继承
支持多重继承，同名则覆盖
.error{
color:red;
}
.success{
color:green;
}
.msg{
@extend .error;
@extend .success;
color: #555555;
}
// -------------生成的css代码-------------
.error, .msg {
color: red; }
.success, .msg {
color: green; }
.msg {
color: #555555; }
@import引入文件
如果一个页面需要使用其他页面的样式，sass可以导入其他的scss文件，scss会把他们编译成一个css文件。这样在开发中可以把一个页面的样式分割成多个scss文件，然后在页面的scss文件中导入其他scss，可以实现css的模块化开发。注意不能导入其它类型的文件或远程文件。
//@import 语法
@import "test2.scss";
// 导入多文件
@import "test2.scss", "test3.scss";
4. 编程相关
@if @else条件语句
.box {
@if 1+1 == 2 {
color: red;
} @else if 1+1 == 3 {
color: blud;
} @else {
color: pink;
}
}
// -------------生成的css代码-------------
.box {
color: red;
}
@for循环
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
// -------------生成的css代码-------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
@each迭代
$list : ['one','two'];
@each $i in $list {
.item-#{$i}:before {
content: $i;
}
}
// -------------生成的css代码-------------
.item-one:before {
content: "one";
}
.item-two:before {
content: "two";
}
@debug、@warn、@error调试
打印到标准错误输出流。
- debug
@debug 10em + 12em;
- warn
@mixin adjust-location($x, $y) {
@if unitless($x) {
@warn "Assuming #{$x} to be in pixels";
$x: 1px * $x;
}
@if unitless($y) {
@warn "Assuming #{$y} to be in pixels";
$y: 1px * $y;
}
position: relative; left: $x; top: $y;
}
- error
@mixin adjust-location($x, $y) {
@if unitless($x) {
@error "$x may not be unitless, was #{$x}.";
}
@if unitless($y) {
@error "$y may not be unitless, was #{$y}.";
}
position: relative; left: $x; top: $y;
}
![[docker] docker 安全知识 - 镜像，port registry](https://img-blog.csdnimg.cn/direct/f2d6d2a598aa44c58b4a5f78e1a72de7.png)
