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://upload-images.jianshu.io/upload_images/18293173-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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • CSS相关
    1.1CSS 基础与选择器初识 | CSS 1. CSS 加载方式有几种？ CSS样式加载一共有四种方式： 1、行...
    没糖_cristalle阅读 678评论 0赞 0
  • CSS
    媒介查询相关的自适应布局 媒体查询就是针对不同媒体类型在不同CSS属性时的样式表现 清除浮动 浮动带来的问题： ①...
    14d986ef7574阅读 272评论 0赞 0
  • html&css
    一、HTML和CSS 1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? IE: trident内核...
    Virtual66阅读 570评论 0赞 0
  • HTML&CSS+JS综合复习1
    HTML&CSS： 一.浏览器内核： 1.渲染引擎：渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理...
    GIDK阅读 375评论 0赞 0
  • html+css阶段高频面试题
    1、简述<!doctype>的作用 <!doctype>是文档的声明，告诉浏览器当前的文档类型；<!doctype...
    未来的学长阅读 1,218评论 0赞 1