sass快速入门1

一、css3中的变量命名(css3之前版本不能用)

1.定义需要在：root中进行定义，而且变量的名字前边必须带--

2.使用的时候需要用var来取到定义的变量

<style>
    :root{
        --col:red;
    }
    .id{
   width: 200px;
   height: 200px;
   background-color: var(--col);
    }
</style>
<body>
    <div class="id">
        hhh
    </div>

二、sass(css预处理器)的安装搭建

1.常见的css预处理器：sass（ruby环境）、less（node.js）、stylus

2.安装sass（使用vue中直接构建，不下载安装sass）

在创建vue的时候勾选下边所示的选项

三、sass

1.定义及引用

$col:#cccccc;
.hot{
color:$col;
}

定义变量：sass使用$标识变量；（选择原因：！太丑了，且在css中没有其他使用$的）

使用变量的时候直接使用就可以了。

2.变量命名的时候变量名用中划线还是下划线跟据个人喜好

3.嵌套css规则：重复写选择器是非常麻烦的；sass可以让你只写一遍，且样式可读性高；

例如我们下边这个css的代码段,很多部分都是重复的

.cotain .col p{
color:red;
}

.cotain .col h3{
color:green;
}

.cotain .col h1{
color:blue;
}

.cotain .prep {
color:white;
}

我们就可以用sass进行改写为下边的代码通过嵌套的方式

.cotain{
 .col {
  p{
color:red;
}
 h3{
color:green;
}

 h1{
color:blue;
}

}

.prep {
color:white;
}

}

4.父选择器标识符&（当在嵌套规则中需要获取父选择器的时候（比如添加伪类选择器或伪元素的时候））

下边的代码中，&所代表的就是他的父类，也就是p

.cotain{
 .col {
  p{
color:red;
&:hover:yellow;
}

}

5.群组选择器的嵌套(就是一个类下边多个类具有相同的属性的时候如下边代码的p,h1,h2,h3,h4)

.cotain{
 .col {
  p,h1,h2,h3,h4{
color:red;
&:hover:yellow;
}

}

6.嵌套属性

甚至有的时候可以进行混合使用,这里就在设置boder样式的同时设置了boder-left和right

.map{
border:1px solid black{
left:0px;
right:0px;
}

}

7.运算

其中值得注意的是，+-左右放空格和单位；*/不要有空格不需要单位；

猜你喜欢