在React中使用Sass实现Css样式管理-10

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;
}