css预处理器sass/scss入门
sass/scss入门
- 一、css预处理器是什么？
- 二、为什么要用css预处理器？
- 三、sass、less、stylus的区别?
- 四、sass与scss
- 五、sass安装
- 六、sass常见用法
- 6.1 嵌套
- 6.2 父选择器
- 6.3 变量
- 6.4 插值语句
- 6.5 数据类型与基本运算
- 6.5.1 数字运算
- 6.5.2.字符运算
- 6.5.3.颜色运算
- 6.6 混合宏 VS 继承 VS 占位符
- 6.6.1 混合宏
- 6.6.2 继承
- 6.6.3 占位符
- 6.7 控制命令
- 6.7.1 @if
- 6.7.2 @for
- 6.8 常用函数
- 七、实战
- 7.1 广西-技术支撑-业务引擎-主表单-组件
- 7.2 内蒙-首页-导航上浮气泡
一、css预处理器是什么？
css 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 css文件，以供项目使用。css预处理器为 css增加一些编程的特性，无需考虑浏览器的兼容性问题。
二、为什么要用css预处理器？
最开始 css在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如今网站的复杂度已经不可同日而语，css种无法定义变量以及没有合理的样式复用机制，导致整体CSS样式难以维护，原生 css已经让开发者力不从心。
开发者选择了另一门更高级的语言（Ruby）来进行开发，然后编译到底层语言以便实际运行，css预处理器应运而生，扩展了css的使用场景与范围。
三、sass、less、stylus的区别?
sass、less、stylus是三种使用最广泛的css预处理器。
- Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。sass官网
- Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。less官网
- Stylus 富于表现力、动态的、健壮的 CSS。stylus官网
四、sass与scss
sass 和 scss 其实是同一种东西，我们平时都称之为 sass，两者之间不同之处有以下两点：
- 文件扩展名不同，sass 是以“.sass”后缀为扩展名，而 scss是以“.scss”后缀为扩展名
- 语法书写方式不同，sass 是以严格的缩进式语法规则来书写，不带大括号" { } “和分号” ; "，而 scss的语法书写和我们的 CSS 语法书写方式非常类似。
sass 语法:
$font-stack: sans-serif //定义变量
$primary-color: #333 //定义变量bodyfont: 100% $font-stackcolor: $primary-color
scss语法：
$font-stack: sans-serif;
$primary-color: #333;body {font: 100% $font-stack;color: $primary-color;
}
编译出来的 css
body {font: 100% sans-serif;color: #333;
}
scss和 css写法无差别，这也是 sass后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。
五、sass安装
如果你在使用 Node.js，你可以利用 npm 安装 Sass：
cnpm install -g sass
注意： 这种方式安装的 sass是纯 JavaScript 实现的，运行的速度比ruby版本稍微慢一些。 但是接口是完全一致的。不用Ruby Sass的原因
六、sass常见用法
sass中文文档
angular项目如何使用sass
sass实时编辑转化为css
6.1 嵌套
.main p {color: #00ff00;width: 97%;.redbox {background-color: #ff0000;color: #000000;}
}//编译为
.main p {color: #00ff00;width: 97%; }.main p .redbox {background-color: #ff0000;color: #000000;
}
6.2 父选择器
.text a {color: blue;&:hover { color: red }&:active{ color: blue}
}//编译为
.text a {color: blue;
}
.text a:hover {color: red;
}
.text a:active {color: blue;
}
可以看出 scss 的结构要比 css 清晰，并且写的也要更少。
6.3 变量
变量是以 $ 开头的，可以是颜色，长度，数值，等等。
像 js 的变量一样，scss 的变量也是有作用域的，也就是说内部声明的变量是无法在外面使用的，如果想让内部的变量在外部可访问，需要在变量值后面添加 !global 声明。
$bg-color1: red; //默认定义
.btn-success {background-color: $bg-color1;$bg-color2: blue !global;
}
.btn{background-color: $bg-color2;
}//编译后
.btn-success {background-color: red;
}
.btn {background-color: blue;
}
6.4 插值语句
将变量直接嵌入字符串，需要用#{ 变量 }（类似 ES6 中模板字符串中的 ${ 变量 }
其实 #{} 中是可以插入任意东西的，这里只用到了插入变量，还可以插入方法等等，高级用法。
$img-path: "/assets/static/img";
.card{background: url("#{$img-path}/card-bg.png");
}//编译后
.card {background: url("/assets/static/img/card-bg.png");
}
6.5 数据类型与基本运算
scss当前支持七种主要数据类型:
（1）数字: 如，1、 2、 13、 10px；
（2）字符串: 有引号字符串或无引号字符串，如，“foo”、 ‘bar’、 baz；
（3）颜色: 如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
（4）布尔型：如，true、 false；
（5）空值: 如，null；
（6）值列表: 用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。
（7）map: 更像是一个 JSON 数据。
https://blog.csdn.net/Rayshaan/article/details/111149065
6.5.1 数字运算
加法与减法：在Sass中，做加法运算时，数值可以带单位，但是需要运算单位相同。如果不相同就会报错，编译不通过。做减法运算是“变量”而不是“数值”的时候，要注意减号“-”前后一定要有空格
乘法：两个值单位相同时，只需要为一个数值提供单位即可。
除法：“/”在CSS中已经作为一种符号来使用了，例如我们常见的字体属性缩写font:Arial 12px/1.5em （表示字体大小12px,行高1.5em）。因此在Sass中做除法运算的时候，如果我们直接使用“/”符号作为除号，将不会生效。因此在Sass中，如果我们想要做除法运算，我们需要在外面添加一个“小括号()”。
实际开发中，不管是加法、减法，还是乘法、除法运算，建议在外面加上小括号。这种书写方式，能够使得代码一目了然，也方便维护。
实例：
.box {width: ((220px + 720px) - 11 * 20 ) / 12 ;
}//编译后
.box {width: 60px;
}
6.5.2.字符运算
在 Sass 中可以通过加法符号“+”来对字符串进行连接。
$content: "Hello" + "" + "Sass!";
.box:before {content: " #{$content} ";
}//编译后
.box:before {content: " Hello Sass! ";
}
注意：
- 如果带引号的字符串在 + 符号左侧， 结果会是一个有引号的字符串。
- 如果没有引号的字符串在 + 符号左侧， 结果将是一个没有引号的字符串。
p:before {content: "Foo " + Bar;font-family: sans- + "serif";
}//编译后
p:before {content: "Foo Bar";font-family: sans-serif;
}
6.5.3.颜色运算
所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：
p {color: #010203 + #040506;
}
计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：
如此编译出来的 CSS 为：
p {color: #050709;
}
6.6 混合宏 VS 继承 VS 占位符
初学者都常常纠结于这个问题“什么时候用混合宏，什么时候用继承，什么时候使用占位符？”其实他们各有各的优点与缺点，先来看看他们使用效果：
6.6.1 混合宏
//使用@mixin声明混合宏（声明混入）
@mixin mt($var){margin-top: $var;
}
//使用@include调用
.block {@include mt(5px);span {display:block;@include mt(5px);}
}//编译后
.block {margin-top: 5px;
}
.block span {display: block;margin-top: 5px;
}
总结：混合宏不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，可能会造成代码的冗余，但是混合宏的优势在于可以传参数。
个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
6.6.2 继承
同样的，将上面代码中的混合宏，使用类名来表示，然后通过继承来调用：
//SCSS 继承的运用
.mt{margin-top: 5px;
}.block {@extend .mt;span {display:block;@extend .mt;}
}//编译后
.mt, .block span, .block {margin-top: 5px;
}.block span {display: block;
}
总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多。但是继承不能传变量参数。
个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
6.6.3 占位符
最后来看占位符，将上面代码中的基类 .mt 换成 Sass 的占位符格式：
//SCSS中占位符的使用
%mt{margin-top: 5px;
}.block {@extend %mt;span {display:block;@extend %mt;}
}//编译后
.block span, .block {margin-top: 5px;
}.block span {display: block;
}
总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。
来看一个表格：
6.7 控制命令
6.7.1 @if
@if指令可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。
示例：定义一个混合宏，来控制一个元素隐藏或显示，通过 @if…@else… 来判断传进参数的值来控制 display 的值
@mixin blockOrHidden($boolean:true) {@if $boolean {@debug "$boolean is #{$boolean}";//debug输出信息display: block;}@else {@debug "$boolean is #{$boolean}";display: none;}
}.block {@include blockOrHidden;
}.hidden{@include blockOrHidden(false);
}
6.7.2 @for
在 Sass 的 @for 循环中有两种方式：
@for $i from start through end
@for $i from start to end
区别: through 表示包括 end 这个数，而 to 则不包括 end 这个数
示例：@for应用在网格系统生成各个格子 class 的代码:
//SCSS
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;%grid {float: left;margin-left: $grid-gutter / 2;margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {.#{$grid-prefix}#{$i}{width: $grid-width * $i + $grid-gutter * ($i - 1);@extend %grid;}
}
6.8 常用函数
字符串函数举例：
.test {text: to-upper-case(aaaaa);text: to-lower-case(aA-aAAA-aaa);
}//编译后
.test {text: AAAAA;text: aa-aaaa-aaa;
}
数字函数举例：
生成随机色
random()：返回 0-1 区间内的小数，
random(number)：返回 1 至 number 之间的整数，包括 1 和 limit。
round(number): 返回最接近该数的一个整数，四舍五入。
max(5, 7, 9, 0, -3, -7): 返回最大值。
min(5, 7, 9, 0, -3, -7)：返回最小值。
颜色函数举例：
rgba( r e d , red, red,green, b l u e , blue, blue,alpha)： 函数主要用来将一个颜色根据透明度转换成 rgba 颜色。
mix( c o l o r − 1 , color-1, color−1,color-2,$weight)：将两种颜色根据一定的比例混合在一起，生成另一种颜色。
七、实战
sass在线转换
七色卡
调试窗口-source-scss-可查看
7.1 广西-技术支撑-业务引擎-主表单-组件
场景1：某些场景下会有大量冗余css代码。
使用scss的混入，定义变量，插值语法后：
7.2 内蒙-首页-导航上浮气泡
场景2：要求背景可以有动态气泡上浮。
简化示例：
html
<div class="light-box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>
scss
//上浮气泡.light-box {width: 15rem;height: 5rem;position: absolute;transform: translate(-3rem, -1rem);overflow: hidden;white-space: nowrap;display: flex;justify-content: space-around;.item {height: 4px;width: 4px;border-radius: 2px;opacity: .8;display: inline-block;border: none;background: linear-gradient(180deg, #68f8ff, rgba(6, 11, 31, 0.00));transform: translateY(9rem);animation: up-top 3s infinite linear;}.item:nth-child(1) {opacity: .5;animation: up-top random(6) + 1s infinite linear;}.item:nth-child(2) {opacity: .4;animation-delay: 100ms;animation: up-top random(6) + 1s infinite linear;}.item:nth-child(3) {opacity: .8;animation-delay: 250ms;animation: up-top random(6) + 1s infinite linear;}.item:nth-child(4) {opacity: .8;animation-delay: 600ms;animation: up-top random(6) + 1s infinite linear;}@keyframes up-top {0% {opacity: 1;transform: translateY(9rem);}100% {opacity: .5;transform: translateY(-6rem);}}}
css预处理器sass/scss入门相关推荐
- CSS预处理器 Sass/Scss
文章目录 介绍 Sass是什么 Scss是什么 Scss 与 Sass异同 为什么使用 Sass? Sass 安装 NPM 安装(推荐使用) Windows 上安装 Mac OS X (Homebre ...
- CSS预处理器sass和less
文章目录 CSS预处理器 什么是CSS预处理器 Sass和LESS背景介绍 Sass背景介绍 LESS的背景介绍 Sass 安装Sass 下载Ruby安装文件 安装Ruby 安装Sass 编译Sass ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- CSS预处理器——Sass、LESS和Stylus区别及联系
一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...
- CSS预处理器-Sass、Less和Stylus-介绍和使用
发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,有不同的语法和功能. 在这篇文章中,我们将介绍三种不同CSS预处器的蛮量.功能以及他们的好处--sass.less 和stylu ...
- css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
- 您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
- 初识css预处理器：Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ sass中文文档:https://www.sass.hk/docs less中文文档:http://lesscss.cn/ 什么是css预处理器 ...
最新文章
- C#模板设计模式使用和学习心得
- JSP与servlet之间的传值方式
- 编程方法学23：搜索排序与算法效率分析
- Google Maps API 代码
- Codeforces Round #664 (Div. 2)
- Java File类boolean delete（）方法（带示例）
- 《Web Hacking 101》中的链接整理
- 最近在学OAuth2.0协议，给大家分享一下
- MySQL数据库加密和解密~认证登陆密码(mysql.user)和MySQL不区分大小写
- 《西游记》中九尾狐狸为什么有太上老君的幌金绳？
- 图像变换——图像反转
- 广州地铁线路查询程序C语言,广州地铁线路图
- iTextSharp操作PDF
- maven手册(转)
- 常见股票涨跌预警事件
- 189邮箱smpt服务器,客户端软件配置-帮助中心-中国电信189邮箱
- Hadoop---Google MapReduce（转）
- 为何谷歌围棋AI AlphaGo可能会把李世石击溃
- 客户流失及用户画像分析
- Deep learning based segmentation for automated training of apple trees on trellis wires