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