css-less-scss
一、css
内容总结
CSS中有两种长度单位，绝对长度单位和相对长度单位。重要的是要知道它们之间的区别，以便理解它们控制的元素将变得有多大。
绝对长度单位.png
相对长度单位
还原UI设计
设计稿源文件：PSD、Sketch、Xd
padding 不能为负值，margin可以为负值。
嵌套元素第一个子元素的margin-top会有传递问题（第一个子元素的margin-top会变为父元素的margin-top）
解决方法：使用padding代替；给父元素加边框；BFC块级格式化上下文；弹性布局/网格布局
兄弟元素的margin会产生重叠（只有上下会，左右不会）
解决方法：BFC块级格式化上下文；弹性布局/网格布局
块级元素(block)不设置width时，其width与父元素的width相同
内联盒子(inline)不支持width、height属性，对margin、padding的top和bottom支持度不高，其宽高由内容撑开。内联盒子之间有空隙，一般不用于做布局，做修饰较好。
自适应盒模型:
固定宽高的时候（固定了content的范围大小），设置padding/border/margin会有溢出现象，即给盒子肉眼可见宽高大于所设置的宽高。
解决方法：不设置固定宽/高。设置怪异盒子
标准盒模型和怪异盒模型区别：
标准盒模型：宽/高=content
怪异盒模型：宽/高=content+padding+border+margin
在标准模型中，如果给盒子设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高-起决定整个盒子的大小。而怪异盒模型的width 和 height设置的是整个盒子的宽高
设置怪异盒子：box-sizing:border-box;
注意：在标准盒模型下，设置了宽/高100%或者fixed定位的情况下，使用padding/border/margin,可能会出现滚动条（我常犯的错误！）
设置了fixed定位，其宽高就由其内容决定（???）
float:left/right;特性
浮动只会影响后面的元素;文本不会被浮动元素覆盖（可实现图文混排的效果）；具备内敛盒子的特性；浮动的元素溢出会自动换行。
清除浮动的方法：
image.png
clear:both;(针对块级元素) BFC 空标签 .clearfix::after{content:'';clear:both;;display:block;}
position:reactive/absolute/fixed/static/sticky;
relative：相对定位。相对于元素原来的位置定位，不会影响其他元素。
absolute：绝对定位。会脱离文档流，相对于最近的非static祖先元素定位，当不存在这个的祖先元素时，则相对于可视区域定位。
fixed：固定定位。会脱离文档流，相对于可视区域定位。
sticky：黏性定位。粘性定位可以认为是相对定位和固定定位的混合。元素在跨越特定闽值前为相对定位，之后为固定定位。可做首行冻结效果（常见需求）
z-index默认是0
书写模式writing-mode
horizontal-tb: 水平方向自上而下的书写方式
vertical-rl: 垂直方向自右而左的书写方式
vertical-Ir: 垂直方向自左而右的书写方式
sideways-rl: 内容垂直方向从上到下排列
sideways-lr: 内容垂直方向从下到上排列
!书写模式writing-mode取值与效果图](https://img.haomeiwen.com/i18293173/5fa7ed582f018f7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
BFC块级格式化上下文
具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
触发BFC的条件【满足以下任一条件即可】：
float的值不是none;
position的值不是static/relative;
display的值不是inline-block/table-cell/fixed/table-captiob/inline-flex;
overflow的值不是visible;
BFC的应用:
前面在设置盒模型的margin时，出现了传递和叠加的问题，就可以采用BFC规范来解决，原理是让盒子形成一个独立的容器，无论子元素如何折腾，都不影响到外面的元素。
<style>
.box1 {
width: 200px;
height: 200px;
background: pink;
overflow: hidden;/* 触发了BFC，形成独立盒子 */
}
.box2{
width: 100px;
height: 10@px;
background: skyblue;
margin-top: 30px;
}
</style>
<div class="box1">
<div cla55="box2"></div>
</div>
Css样式重置
标签默认样式：
一些HTML标签在浏览器中会有默认样式，例如: body标签会有margin:8px; ul标签会有margin:16px 0;及padding-left:40px;
当我们在切图软件中进行尺寸或位置测量的时候，把测量出来的数值设置到对应的标签上时，可能会受到当前标签默认样式的影响，从而了示效果跟设计图效果不符。这时就可以清除标签默认样式。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
@charset "utf-8";
/* 应用更直观的盒模型（box-sizing） */
*, *::before, *::after {
user-select: none;
box-sizing: border-box;
}
/* 勾销默认的内外边距 margin padding */
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul , li, p, fieldset, legend, header, footer, hgroup, menu, nav, section {
margin: 0;
padding: 0;
}
/* 容许通过百分比设置利用的高度 */
html, body, #app {
width: 100%;
height: 100%;
/* 优化 text 的渲染平滑度 */
-webkit-font-smoothing: antialiased;
}
/* 滚动条默认宽度、高度 w 纵向宽 h 横向高 */
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #707070;
}
/* 横纵滚动条交接处的小方块儿 */
::-webkit-scrollbar-corner {
background-color: #707070;
}
/* 去除所有我的项目符号标识 */
li {
list-style: none;
}
/* 去除超链接默认下划线 */
a {
text-decoration: none;
}
/* 去除图片与容器底部的留白 更正当的多媒体默认展现形式 */
img {
display: block;
max-width: 100%;
}
flex弹性布局
flex盒子：display:flex;
水平垂直居中：
display: flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
/*或者*/
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
/*绝对定位，上下左右为0，margin:auto;*/
......
弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间,收缩以适应更小的空间。
flex子项：
flex子项
主轴main与交叉轴cross
image.png
image.png
image.png
image.png
flex-flow:row warp;水平排列+换行 简写
主轴对齐
image.png(针对单行)
交叉轴对齐(针对整体)
当不换行(不设置flex-warp:warp;)时，align-content时不生效的
不定项居中布局：
image.png
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.box {
width: 300px;
height: 150px;
background: skyblue;
display: flex;
justify-content: center;
/*justify-content: space-between; 均分列布局*/
align-items: flex-end;
}
.box div {
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
margin:5px;
}
</style>
二、less
1、为什么需要less?
1.1 CSS的语法虽然简单，但它同时也带来一些问题
1.2 CSS需要书写大量看似没有逻辑的代码，不方便维护及扩展，也不利于复用,
1.3 造成这些原因的本质源于CSS是一门非程序式的语言，没有变量/函数/作用域等概念
2、什么是less(Leaner Style Sheets)?
2.1 Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。
2.2 它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展
2.3 一句话:用类似JS的语法去写CSS
变量：
less中定义变量的格式
@变量名称: 值;
less中使用变量的格式
**:@变量名称;
和js一样可以将一个变量赋值给另外一个变量变量名称 :
@变量名称:@变量名称;
和js一样，less中的变量也有全局变量和局部变量，定义在{}外面的就是全局变量，什么地方都可以使用，定义在{}里面的就是局部变量，只能在当前{}中使用
注意定: less中的变量是延迟加载的，写到后面也能在前面使用
<style less="less">
@w:100px;//全局变量
@w:100px;
.box{
@c: blue;//局部变量
width: @w;
height: @w:
background: @c;
}
</style>
变量插值：
1.什么是变量插值?
在less中，属性名和选择器也可以定义为变量，但使用时不能直接使用，需要使用差值语法
2.变量插值的格式
格式: @变量名称
@size: 200px;
@w: width;
@s: div;
@{s}{
@{w}: @size;
height: @size;
background: red;
}
运算：（）
div{
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
/*以下的方式不利于编码，因为需要我们自己口算元素宽度的一半是多少*/
/*margin-left: -100px;*/
/*以下的方式不利于兼容，因为transform属性是CSS3新增的， 只有支持C3属性的浏览器才可以使用*)/*transform: translateX(-50%);*/
/*在CSS3中新增了一个calc函数，可以实现简单的+ - * / 运算*/
/*margin-left: calc(-200px / 2);*/
/*less中的运算和css3新增的calc一样支持简单的+ - * / 运算，需要标明单位*/
margin-left: (-200px / 2); //margin-left: (-200px * 0.5);
混合（重要）:
什么是less中的混合(Mix in)?
将需要重复使用的代码封装到一个类选择器中，在需要使用的地方调用封装好的类选择器，在预处理的时候less就会自动将用到的封装好的代码拷贝过来。
本质就是ctrl+c --> ctrl + v
/*.center编译为css之后会保留*/
.center(
position: absolute;
left: 50%;
top: 50%;
ransform: translate(-50%, -50%) ;
}
.father (
width: 300px;
height: 300px;background: red;
.center;
.son{
width: 200px;
height: 200px;
background: blue:
.center;
}
}
注意：
less中混合的注意点:如果混合名称的后面没有()，那么在预处理的时候，会保留混合的代码，如果混合名称的后面加上()，那么在预处理的时候，就不会保留混合的代码。调用时也需要加()
/*.center()中的代码编译为css之后不会保留*/
.center()(
position: absolute;
left: 50%;
top: 50%;
ransform: translate(-50%, -50%) ;
}
.father (
width: 300px;
height: 300px;background: red;
.center();
.son{
width: 200px;
height: 200px;
background: blue:
.center();
}
}
带参数的混合：
.混合名(@参数1:默认值, @参数2:默认值, @参数3:默认值){
width: @参数1;
height: @参数2;
background: @参数3;
}
// 这里就是带参数的混合
/*
.whc(@w, @h, @c){
width: @w;
height: @h;
background: @c;
}
*/
// 这里就是带参数的混合, 并且带默认值
.whc(@w:100px, @h:100px, @c:pink){
width: @w;
height: @h;
background: @c;
}
.box1{
//width: 200px;
//height: 200px;
//background: red;
//.whc(200px, 200px, red);
// 这里是给混合的指定形参传递数据
.whc(@c:red);
}
.box2{
//width: 300px;
//height: 300px;
//background: blue;
.whc(300px, 300px, blue);
}
混合的可变参数：
less中的...表示可以接收0个或多个参数，如果形参列表中使用了..., 那么...必须写在形参列表最后。
当需要把混合的所有参数使用到同一个属性上时，可以不用单独复制，@arguments就表示使用当前混合的所有参数。
//至少要传两个参数
.animate(@name, @time, ...){
//transition: @name @time @mode @delay;
transition: @arguments;
}
div{
width: 200px;
height: 200px;
background: red;
//.animate();//报错，传递的参数不够
.animate(all, 4s, linear, 0s);
}
less混合的匹配模式：
就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合。
@_: 表示通用的匹配模式
什么是通用的匹配模式?
无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码。
// 案例：将元素实现三角形的混合
.triangle(@_, @width, @color){
// 使用混合的通用匹配模式，可减少混合中的重复代码
width: 0;
height: 0;
border-style: solid solid solid solid;
}
.triangle(Down, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
//border-style: solid solid solid solid;
border-color: @color transparent transparent transparent;
}
.triangle(Top, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
//border-style: solid solid solid solid;
border-color: transparent transparent @color transparent;
}
.triangle(Left, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
//border-style: solid solid solid solid;
border-color: transparent @color transparent transparent;
}
.triangle(Right, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
//border-style: solid solid solid solid;
border-color: transparent transparent transparent @color;
}
div{
/*
混合的匹配模式
就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合
*/
//.triangle(Down, 80px, green);
//.triangle(Top, 80px, green);
//.triangle(Left, 80px, green);
.triangle(Right, 80px, green);
}
less文件导入：
//@import "triangle.less";
@import "triangle";//后缀可省略
div{
//使用导入的less文件中的混合
.triangle(Down, 40px, red);
}
less中的内置函数：
（由于less的底层就是用JavaScript实现的，所以JavaScript中常用的一些函数在less中都支持）
// 混杂方法
image-size("file.jpg"); // => 100px 50px
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px
// 单位转换
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8
// 列表
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C
// 数学
ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 转百分比
round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取绝对值
pi(); // => 3.141592653589793 圆周率π
max(3px, 42px, 1px, 16px); // => 42px
min(3px, 42px, 1px, 16px); // => 1px
// 字符串
replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
// 判断类型
isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(4rem, rem); // => true 是否为指定单位
isruleset(@rules); // => true 是否为变量
// 颜色操作
saturate(color, 20%) //增加饱和度
desaturate(color, 20%) //减少饱和度
lighten(color, 20%) // 增加亮度
darken(color, 20%) // 减少亮度
fadein(color, 10%) // 降低透明度
fadeout(color, 10%) // 增加透明度
fade(color, 20%) //设置绝对不透明度(覆盖原透明度)
spin(color, 10) //旋转色调角度
mix(#f00, #00f, 50%) // 将两种颜色混合，不透明度包括在计算中。
tint(#007fff, 50%) // 与白色混合
shade(#007fff, 50%) // 与黑色混合
greyscale(color) //灰度，移除饱和度
contrast(color1, color2) // 返回对比度最大的颜色
// 颜色混合
multiply(color1, color2);//每个RGB 通道相乘，然后除以255
screen(color1, color2);//与 multiply 相反
overlay(color1, color2)// 使之更浅或更暗
softlight(color1, color2)//避免太亮或太暗
hardlight(color1, color2)//与overlay相同，但颜色互换
average(color1, color2)// 计算每个通道(RGB)基础上的两种颜色的平均值
less中的层级结构：
如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器。
.father{
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器
例如以下代码son会转换成: .father .son{}
*/
.son{
// 这里的&的作用, 是告诉less在转换的时候不要用后代选择器来转换, 直接拼接在当前选择器的后面即可
&:hover{
background: skyblue;
}
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 伪元素中的&与伪类中的同理
/*
&::before{
content: "子元素";
display: block;
background: yellowgreen;
width: 100px;
height: 100px;
}
*/
}
less中的继承：
1、less中的继承和less中混合的区别：
① 使用时的语法格式不同
② 转换之后的结果不同(混合是直接拷贝, 继承是并集选择器)
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father:extend(.center){//继承用法
width: 300px;
height: 300px;
background: red;
//.center; //混合用法
.son:extend(.center){//继承用法
width: 200px;
height: 200px;
background: blue;
//.center; //混合用法
}
}
less中的条件判断：
less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码。
when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断。
//比较运算符 宽等于100px时执行混合size
.size(@width,@height) when (@width = 100px){
width: @width;
height: @height;
}
div{
.size(100px,100px);
background: red;
}
//逻辑运算符
// (),()相当于JS中的|| 宽或高等于100px时执行混合size
.size(@width,@height) when (@width = 100px),(@height = 100px){
width: @width;
height: @height;
}
// ()and()相当于JS中的&& 宽和高都要等于100px，才会执行混合size
.size(@width,@height) when (@width = 100px)and(@height = 100px){
width: @width;
height: @height;
}
//检查函数 ispixel是less内置函数，用于判断单位是否为px
.size(@width,@height) when (ispixel(@width)){
width: @width;
height: @height;
}
三、SASS
什么是SASS(Syntactically Awesome Stylesheets Sass)?
SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。
如何学习SASS?
LESS是一套利用JavaScript实现的CSS预处理器, 诞生于2009年。
由于LESS的诞生比SASS要晚, 并且LESS受到了Sass的影响, 所以在LESS中能看到大量SASS中的特性。所以只要学会了LESS就等同于学会了大部分的SASS。
LESS和SASS文件后缀名区别：
LESS以.less结尾 -------- SASS以.sass或者.scss结尾
两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号：
.scss以{}表示层级结构, 语句后面需要写分号
企业开发中推荐使用.scss结尾
注意点: 如果需要使用考拉编译sass文件, 项目目录结构中(包含文件名)不能出现中文和特殊字符。
SASS中的注释：
SASS中的注释和LESS一样
单行注释不会被编译(不会出现在编译后的文件中)，多行注释会被编译 (会出现在编译后的文件中)。
SASS中的变量：
SASS中的变量和LESS中一样, 只是定义格式不同
LESS中定义变量 @变量名称: 值;
SASS中定义变量 $变量名称: 值;
SASS中变量特点：
SASS中变量特点和LESS中几乎一样
①后定义覆盖先定义
②可以把变量赋值给其它变量
③区分全局变量和局部变量(访问采用就近原则)
注意点：
LESS中变量是延迟加载, 可以先使用后定义
SASS中变量不是延迟加载, 不可以先使用后定义
变量插值：
1.什么是变量插值?
如果是属性的取值可以直接使用变量，但是如果是属性名称或者选择器名称并不能直接使用变量， 必须使用变量插值的格式。
2.SASS中的变量插值
SASS中的变量插值和LESS中也一样, 只不过格式不一样
LESS变量插值格式: @{变量名称}
SASS变量插值格式:#{$变量名称}
SASS中的运算：
SASS中的运算和LESS也一样, 都支持+ - * / 运算
注意点: 无论是LESS中的运算还是SASS中的运算都需要加上()
SASS中的混合：
SASS中的混合和LESS中也一样, 只是定义格式和调用的格式不同
LESS中混合定义: .混合名称{}或者.混合名称(){}
LESS中混合调用: .混合名称;或者 .混合名称();
SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
SASS中混合调用: @include 混合名称;或者 @include 混合名称();
SASS中带参数的混合：
SASS中带参数的混合和LESS中也一样
①不带默认值形参
②带默认值形参
③给指定参数赋值
SASS中的可变参数：
SASS中的可变参数和LESS中也一样,
只不过由于SASS不是使用JS实现的, 所以不能直接在混合中使用arguments
必须通过 $args...的格式来定义可变参数, 然后通过$args来使用
注意点:
和LESS一样，SCSS的可变参数必须写在形参列表的最后
.scss文件中导入其它.scss文件：
和LESS一样，SASS文件中也支持导入其它SASS文件。
其实原生的CSS也支持通过@import导入其它的CSS文件, 只不过不常用
不常用原因：原生的@import导入其它的CSS文件，只有执行到@import时，浏觅器才会去下载对应 css文件，这导致请求次数变多，页面加载起来特别慢。
而LESS和SASS中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS，所以只会请求一次， 速度更快。
SASS中的内置函数：
和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)：返回一个值在列表中的位置值。
SASS中的层级结构:
和LESS一样支持嵌套, 默认情况下嵌套的结构会转换成后代选择器
和LESS一样也支持通过&符号不转换成后代选择器
SASS中的继承:
SASS中的继承和LESS中的继承一样, 都是通过并集选择器来实现的, 只不过格式不一样而已
混合和继承区别：
混合是直接拷贝到使用混合的地方, 有多少个地方用到就会拷贝多少份
继承是通过并集选择器, 不会拷贝只会保留一份
/*
// 混合center：水平垂直居中
@mixin center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
*/
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father{
@extend .center; //继承类center
width: 300px;
height: 300px;
background: red;
//@include center;//使用混合
.son{
@extend .center;//继承类center
width: 200px;
height: 200px;
background: blue;
//@include center;//使用混合
}
}
SASS中的条件判断：
和LESS一样SASS中也支持条件判断, 只不过SASS中的条件判断支持得更为彻底
SASS中支持：
@if(条件语句){}
@else if(条件语句){}
... ...
@else(条件语句){}
SASS中当条件不为false或者null时就会执行{}中的代码
和LESS一样SASS中的条件语句支持通过> >= < <= ==进行判断
//使用SASS混合实现三角形
@mixin triangle($dir, $width, $color){
width: 0;
height: 0;
border-width: $width;
border-style: solid solid solid solid;
@if($dir == Up){
border-color: transparent transparent $color transparent;
}@else if($dir == Down){
border-color: $color transparent transparent transparent;
}@else if($dir == Left){
border-color: transparent $color transparent transparent;
}@else if($dir == Right){
border-color: transparent transparent transparent $color;
}
}
div{
//width: 0;
//height: 0;
//border-width: 10px 10px 10px 10px;
//border-style: solid solid solid solid;
//border-color: #000 transparent transparent transparent;
//@include triangle(50px, blue);
//@include triangle(Up, 50px, blue);
@include triangle(Left, 50px, blue);
}
SASS中的循环：
SASS比LESS厉害的地方就在于SASS中直接支持循环语句, 而LESS中需要通过混合+条件判断自己实现。
SASS中支持两种循环, 分别是for循环和while循环：
for循环
@for $i from 起始整数 through 结束整数{}
@for $i from 起始整数 to 结束整数{}
两者的区别 through含头含尾, to含头不含尾
while循环
@while(条件语句){}
案例：将ul列表中的第5-8个元素的背景色变为蓝色，其余为红色
// html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
// js
<style lang="scss" scoped>
ul{
li{
width: 100%;
height: 50px;
border: 1px solid #000;
font-size: 20px;
color: #fff;
background: red;
//方法一：使用css选择器实现
&:nth-child(5){
background: blue;
}
&:nth-child(6){
background: blue;
}
&:nth-child(7){
background: blue;
}
&:nth-child(8){
background: blue;
}
// 方法二：@for $i from 起始整数 through 结束整数{}
@for $i from 5 through 8{
&:nth-child(#{$i}){
background: deepskyblue;
}
}
//方法三：@for $i from 起始整数 to 结束整数{}
@for $i from 5 to 9{
&:nth-child(#{$i}){
background: deepskyblue;
}
}
//方法四：使用while循环
$i:5; //定义一个变量i，并赋初始值为5
@while($i <= 8){
&:nth-child(#{$i}){
background: deepskyblue;
}
$i:$i+1;
}
}
}
</style>
