Sass
时间:2019-10-18
本文章向大家介绍Sass,主要包括Sass使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Sass
Sass介绍
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件,以及更高效地开发项目。
语法格式
Sass共有两种语法结构 Sass、Scss。两种语法基本相同,但是Sass用缩进代替花括号,用换行代替了分号。
Sass
.father width: 100px height: 100px .son width: 50px height: 50px
scss
.father{ width: 100px; height: 100px; .son{ width: 50px; height: 50px; } }
变量
// scss中定义变量: $变量名: 变量值
$w: 100px;
sass中变量的特点:
- 后定义的变量会覆盖先定义的变量
- 可以通过值传递用变量给变量赋值
- sass中的变量存在作用域
- sass变量和less变量不同,sass中的变量不会进行预处理,不能先使用后定义
变量插值
// 在sass中,如果变量是属性值的话,可以直接 $变量名 调用
// 如果变量是属性名或者选择器名的话需要使用 #{$变量名} 调用
$d: div;
$w: width;
$h: height;
$size: 100px;
${d}{
${w}: $size;
${h}: $size;
}
运算
// sass中支持 + - * / 运算, 但是运算时都要用 () 将运算式包裹起来
div{
width: (100px * 2);
height: (400px / 2);
background: red;
margin-top: (10px + 10px);
margin-bottom: (30px - 10px);
}
混合
// 创建混合: @mixin 混合名(){} 或 @mixin 混合名{}
// 调用混合: @include 混合名() 或 @include 混合名
@mixin center(){
// ...
}
div{
@include center();
// ...
}
带参混合
@mixin whc($w: 200px, $h: 200px, $c: red){
width: $w;
height: $h;
background: $c;
}
.box1{
@include whc();
}
.box2{
@include whc(300px, 300px, blue);
}
.box3{
@include whc($c: yellow);
}
混合中的可变参数
// 变量名... 可以接受0个或多个参数
@mixin ani($name, $time, $args...){
transition($name, $time, $args);
}
导入外部Sass文件
// 可以使用@import来导入外部Sass文件,文件的.scss后缀可以省略。
@import './css/center'
内置函数
// 和LESS一样, SASS中也提供了很多内置函数方便我们使用
// 字符串函数
/*
unquote($string):删除字符串中的引号;
quote($string):给字符串添加引号;
To-upper-case($string):将字符串小写字母转换为大写字母
To-lower-case($string):将字符串大写字母转换为小写字母
*/
// 数值函数
/*
percentage($value):将不带单位的数转换成百分比值;
round($value):将数值四舍五入,转换成一个最接近的整数;
ceil($value):向上取整;
floor($value):向下取整;
abs($value):取数的绝对值;
min($numbers…):找出几个数值之间的最小值;
max($numbers…):找出几个数值之间的最大值;
random(): 获取随机数
*/
// 颜色函数
/*
rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;
rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;
red($color):从一个颜色中获取其中红色值;
green($color):从一个颜色中获取其中绿色值;
blue($color):从一个颜色中获取其中蓝色值;
mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
*/
// 列表函数
/*
length($list):返回一个列表的长度值;
nth($list, $n):返回一个列表中指定的某个标签值;
join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
append($list1, $val, [$separator]):将某个值放在列表的最后;
zip($lists…):将几个列表结合成一个多维的列表;
index($list, $value):返回一个值在列表中的位置值。
-->
自定义函数
@fuunction (num){
return num * num + px;
}
div{
width: square(20);
height: square(20);
}
层级结构
// 和less中一样sass中在一个选择器样式内部写另一个选择器,默认是层级结构即父子关系,
// 可以通过添加 & 符来取消层级关系
.father{
// ...
&:hover{
// ...
}
.son{
// ...
}
}
继承
// 和Less一样,Sass可以通过继承来降低代码冗余度
// Sass通过@extend来进行继承
.center{
// ...
}
div{
@extend .center;
}
条件判断
// sass中不支持混合的匹配模式,但是sass和less一样支持条件判断,而且比less中的更加彻底
// 格式@if(){}@else if(){}...else{}
// 绘制三角形
@mixin triangle($dir, $width, $color){
width: 0;
height: 0;
border-width: $width;
border-style: solid;
border-color: transparent;
@if($dir == Up){
border-bottom-color: $color;
}@else if($dir == Down){
border-top-color: $color;
}@else if($dir == Left){
border-right-color: $color;
}@else if($dir == Right){
border-left-color: $color;
}
}
div{
@include triangle(Up, 30px, red);
}
循环
```scss
/*
sass中支持循环
for循环:
@for $变量名 form 变量起始值 through 变量结束值{}
@for $变量名 form 变量起始值 to 变量结束值{}
第一种for循环包前包后,第二种for循环包前不包后
while循环:
@while(循环条件){}
/
ul{
li{
/
// 从5到8的li背景变黄色
@for $i from 5 through 8 {
&:nth-child(#{$i}) {
background: yellow;
}
}
*/
$i: 5;
@while($i <= 8){
&:nth-child(#{$i}){
background: yellow;
}
$i: $i + 1;
}
}
}
`
原文地址:https://www.cnblogs.com/luwenfeng/p/11700434.html
- 浏览器 HTTP 协议缓存机制详解
- 详解 Windows 下 Eclipse CDT 配置 C/C++ 编译环境
- 硬核乘法器的Verilog HDL 调用
- Web 自动化测试与智能爬虫利器:PhantomJS 简介与实战
- 浅谈 Scala 中下划线的用途
- Java 多线程之 Runnable VS Thread 及其资源共享问题
- 块RAM的Verilog HDL调用
- 玩转千位分隔符输出
- DCM 模块的Verilog HDL 调用
- Python RPC 远程调用脚本之 RPyC 实践
- CRC16 编码器的Verilog HDL 实现
- macOS 0-day漏洞详情披露,可被利用完全接管系统
- SPI 接口协议的Verilog HDL 实现
- 玩转 Nginx 之:使用 Lua 扩展 Nginx 功能
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- POJ 2054 Color a Tree解题报告
- Jaba_Web--JDBC 删除记录操作模板
- POJ 1789 Truck History 最小生成树
- Vector shrink 请求容器降低其容量和size匹配 shrink_to_fit();
- Codeforces Round #677 (Div. 3)
- Java_Web--JDBC 增加记录操作模板
- js逐步实现原生控制系统
- STL 训练 POJ - 1862 Stripies
- Cypress系列(66)- 测试运行最佳实践
- Golang内存逃逸是什么?怎么避免内存逃逸?
- js逐步教实现表单系统
- STL训练 HDU - 1716 Ray又对数字的列产生了兴趣:
- Cypress系列(68)- request() 命令详解
- js逐步教实现音乐系统
- 疯子的算法总结(四)贪心算法