css预处理器 scss

最近开始正式接手项目了 在开发项目的过程中  感觉css的编写很恶心  因为在编写css、的时候有权重 所以打算学一个工具 scss  

并不难 感觉记住几个东西就可以直接上手用到项目中了  

变量 

用 $a:red 

在scss文件中  就可以 

body {

color :$a  \\设置字体为red 

}

这个功能 我对他的理解就是更加方便的进行项目的维护 

如果在项目中多处的字体为蓝色 但是之后需要进行更改的时候  不需要一处一处的更改

只需要在修改变量中的值就可以了

  嵌套

就是让css拥有了html的层级的概念  

有些组件的样式是继承父组件的  

css有了结构之后开发起来一目了然一些  

最重要的是  我们就不在需要 每次 都选中父级 可以不在被选择器的权重问题骚扰 

body {

        color:red

        text{

       color:blue

        }

}

分片 

把scss的文件按照功能 模块划分

每片的文件名以_开头

单独分片的文件不能生成css文件

引入分片  dart scss使用@use 其他的都用@import 引入时不需要带后缀和_

//这个文件名字叫 _base.scss    在其中  

$a:red 

$size:30px

body {

font-size：$size

}

@import 'base'  //引入的时候不需要后缀和_

.text {

color:$a  //可以使用 _base.scss中的变量  并且最后编译出来的时候 body中的样式也在

} 

我对分片的理解是 可以模块化的 对页面的样式进行开发

混合

函数形式的声明语法 

使用@mixin声明一个函数 在其他类选择器中调用这个函数

函数也可以接收参数

 @mixin theme($theme:red){  //这里的red实际上是当你使用混合的theme的时候 默认的值

//这里面是一些样式设置 

backgroud:$theme;//需要用到$theme 

//在这里你甚至可以使用RGBA的形式设置颜色  真tm灵活  

color:rgba($theme,0.25)  //编译出来  颜色不一样 但是透明度是一样的 巨人nb

}

如何使用混合

 .text {

@ include theme

}

.//或者

.text {

@include theme($theme:color)

}

 主要是用来创建整个网页中的重复使用的声明组 

我是不是可以认为他是变量的一个复杂版呢？

扩展和继承

使用%声明一个基类

在css选择中使用@extend 基类 来继承基类中的所有属性

如果一个基类没有被任何选择器继承 那么预处理后得到的css文件不会包含这个基类选择器

%jilei {

color:red;

display-flex

} 

.message {

@extend %jilei

}

 先声明一个基类 其中一堆属性 

在写scss中 继承基类中的一堆属性

编译成css之后对应的是共有的一些属性

运算

通过引入@use 'scss:math'  可以在scss中进行算数运算

支持的算数运算包括加减乘除  但是除是math.div()

到这里基本上就可以scss生产了