sass快速入门1_it行星的博客-爱代码爱编程
一、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.运算
其中值得注意的是,+-左右放空格和单位;*/不要有空格不需要单位;