什么是预处理器？

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); // #d6d65ccolor: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
！！参考简书
蚂蚁部落文档

css预处理器scss的理解相关推荐

CSS预处理器--SCSS
介绍 Scss是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 以下为基本语法一.注释注释分为单行注释和多行 ...
CSS - 预处理器SCSS
目录 SCSS简介 SCSS 编译环境安装 Live Sass Compiler 编辑 npm包 sass SCSS语法概览嵌套语法选择器嵌套选择器嵌套中的父选择器 & 属性嵌套注释 ...
CSS预处理器 Sass/Scss
文章目录介绍 Sass是什么 Scss是什么 Scss 与 Sass异同为什么使用 Sass? Sass 安装 NPM 安装(推荐使用) Windows 上安装 Mac OS X (Homebre ...
css预处理器sass/scss入门
sass/scss入门一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装六.sass常见用法 6.1 ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
初识css预处理器：Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ sass中文文档:https://www.sass.hk/docs less中文文档:http://lesscss.cn/ 什么是css预处理器 ...
再谈 CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
CSS预处理器——Sass、LESS和Stylus区别及联系
一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...

css预处理器scss的理解

什么是预处理器？

SCSS：

scss语法：

css预处理器scss的理解相关推荐

最新文章

热门文章