css预处理器scss的理解
什么是预处理器？
css预处理器，为css增加一些编程特性，更简洁，更使用，可读性更佳，更利于代码维护。没有浏览器兼容问题。
SCSS：
sass是最早的css预处理语言，scss继承了sass的强大功能。，并在它的基础上增加了新功能，且其语法完全兼容css3。SCSS还能识别大部分css hacks和特定于浏览器的语法，例如:古老的IE filter。由于SCSS是CSS的扩展，因此，所有在css中工作的代码也能在scss中正常工作。
说明：学习scsss没必要去了解sass,忽略就好了。
SCSS基于Ruby语言开发而成，因此安装SCSS前需要安装Ruby。
特别说明:mac下自带Ruby无需再次安装。
window下首先要从官网下载Ruby，然后进行安装。
特别说明:要选中第二个添加到环境变量复选框。
打开命令cmd命令行窗口:ruby -v查看是否安装成功
- 安装scss：
npm install sass-loader --save-dev
npm install node-sass --save-dev
- 在build文件夹下的webpack.base.conf.js的rules里添加配置
{
test:/\.scss$/,
loaders:['style','css','sass']
}
- 通过lang=""使用scss
<style lang="scss">
</style>
scss语法：
- 注释
/* */ 在css中显示；
// 在css中不显示；
/* 重要注释 !*/ 压缩不会被删除；
- @imort命令导入外部sass , scss, css 文件；
<style lang="scss">
@import './text.scss';//导入外部文件
</style>
- 变量的声明
<style lang="scss">
$color:red;//$变量名：变量值;
</style>
- 默认变量
<style lang="scss">
$color:red!default;//!default 用来设置默认值
$color:purple; //根据需求覆盖默认变量
.father01 {
color:$color;
}
</style>
-
全局变量和局部变量：全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量的值；
-
局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；
$height:200px; //全局变量声明不在大花括号内
$bgcolor:blue;
body {
.father01 { //嵌套
width:$width;
height:$height;
$border:1px solid red; //局部变量是声明在元素内的
border: $border;
$color:red!global;//使用!global关键字可以局部变量变成全局变量
$bgcolor:purple; //全局变量和局部变量名一致时，调用局部变量进行覆盖
background-color: $bgcolor;
}
.father02{
corlor:$color;//使用全局变量
}
- 变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹
$left:left;//使用字符串插值之前必须先声明
.father02 {
width: 300px;
height:300px;
border-#{$left}:2px solid purple;
}
- 嵌套：选择器嵌套/属性嵌套
nav {//选择器嵌套
ul {
...
}
li { ... }
a {
...
}
}
.demo {/*===== 属性嵌套 =====*/
font: {// 命令空间后带有冒号: 强烈不建议使用！！
family: fantasy;
size: 30em;
weight: bold;
}
}
/*===== 相当于如下CSS =====*/
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
- 继承：使用 @extend.类名 继承某个类的所有样式
.container {
...
}
.myText {
@extend .container; //这里将继承.container类的所有样式
...
}
- ·SCSS占位符 %： 使用% 声明的代码块，如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁
%m5 {
...
}
.P1 {
@extend %m5;
}
- 定义可重复使用的代码块并调用：@mixin定义 @include调用
@mixin normalStyle {//使用@mixin命令定义可重复使用的代码块
...
}
.container {
@include normalStyle;//使用@include 命令引用@mixin定义的代码块
}
- 混合：在使用@mixin和@include时，传入参数和默认值：用来分组哪些需要复用的css声明
@mixin normalStyle($width,$height,$defaultValue:orange) {
width:$width;
height:$height;
background-color:$defaultValue;
}
.container {
@include normalStyle(300px,100px,red);
}
- scss条件语句：
.container {
p {
@if 1+1<3 {
...
} @else {
...
}
}
}
- 循环
//for 循环
@for $i from 1 to 5 {
.item-#{$i} {
border:#{$i}px solid;
}
}
//while 循环
$m:8;
@while $m > 0 {
.items-#{$m} {
width:2em*$m;
}
$m:$m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2
//each 语法
@each $item in class01,class02 { //$item就是遍历了in关键词后面的类名列
.#{$item} {
background-color:purple;
}
}
//会编译成 .class01 , .class02 {background-color:purple;}
- 使用@function 自定义函数及使用
@function double($sn){ //SCSS允许自定义函数
@return $sn*2;
}
.myText {
...
width:double(200px); //使用在SCSS中自定义的函数
}
- 可以直接使用SCSS内置的颜色函数，
.myText {
color:black;
&:hover{
//以下的lighten()、darken()等是SCSS内置的颜色函数
color:lighten(#cc3, 10%); // #d6d65c颜色变浅
color:darken(#cc3, 10%); // #a3a329颜色加深
color:grayscale(#cc3); // #d6d65c
color:complement(#cc3); // #a3a329
}
}
- 操作符：+ - * / %
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%; //相当于 width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%; //相当于 width: 31.25%;
}
- $ 引用父级选择器：
.container {
&>p { //使用&来引用父元素 可以编译成CSS的 .container>p {} 效果
...
}
}
/*===== SCSS =====*/
a {
...
&:hover {
...
}
body.firefox & {
...
}
}
/*===== 以上内容相当于以下CSS内容 =====*/
a {
...
}
a:hover {
...
}
body.firefox a {
...
}
/*======="&"必须出现在复合选择器开头的位置，后面再连接自定义的后缀*/
/*===== SCSS =====*/
#main {
...
&-sidebar {
...
}
}
/*===== 以上内容相当于以下CSS内容 =====*/
#main {
...
}
#main-sidebar {
...
}
！！参考csdn
！！参考简书
蚂蚁部落文档