CSS预处理器--Less和Sass

其他 2020-01-26 23:41:49 阅读次数: 0

CSS预处理语言，为CSS赋予动态语言的特征（用类似JS的语言去写CSS）：增加了变量、Minin（混合）、嵌套、函数和运算等特性，使CSS更容易扩展和维护。
将Less和Sass转化成css的工具：考拉客户端: http://koala-app.com/index-zh.html

Less和Sass的区别

<script>
    /*
    1.SASS(Syntactically Awesome Stylesheets)：
    SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年.
    2.LESS(Leaner Style Sheets)：
    LESS是一套利用JavaScript实现的CSS预处理器, 诞生于2009年.
    由于LESS的诞生比SASS要晚, 并且LESS受到了Sass的影响, 所以在LESS中能看到大量SASS中的特性.
    3.LESS和SASS文件后缀名区别
    LESS 以.less结尾
    SASS 以.sass或者.scss结尾
    两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号
                       .scss以{}表示层级结构, 语句后面需要写分号
                       企业开发中推荐使用.scss结尾
    注意点: 如果需要使用考拉编译sass文件, 项目目录结构中(包含文件名)不能出现中文和特殊字符
    */
</script>

1. Less的基本使用：

1.编写less文件–>引入less文件–>引入less.js–>运行
注意点:
一定要先引入less.css再引入less.js
如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效

    <link rel="stylesheet/less" href="css/index.less">
    <script src="js/less.js"></script>

2.提前预编译
编写less文件–>利用工具转换为css文件–>引入css文件(无需引入less.js, 无需在服务端运行)
将Less转成CSS的工具：

	1.考拉客户端: http://koala-app.com/index-zh.html
	2.开源中国  : https://tool.oschina.net/less
	3.构建工具配置loader自动编译

2. 注释

单行注释不会被编译(不会出现在编译后的文件中)
多行注释会被编译  (会出现在编译后的文件中)

在这里插入图片描述

3. 变量和变量插值

3.1 Less：

  1. 属性的取值可以直接使用变量，属性和选择性不能直接使用变量，要使用变量插值
  2. Less中定义变量：@变量名：值
  3. Less中使用变量：@变量名
  4. 属性和选择器的名称使用变量插值：@{属性或选择器名}
  5. 将一个变量的值赋给另一个变量：@变量名：@变量名
  6. 全局变量：定义在{}外的是全局变量，在任何地方都可以使用
  7. 局部变量：定义在{}内的是局部变量，只能在该{}中使用
  8. Less中有延迟加载，即使变量定义在最后也能使用
  9. 只有在同一个作用域中的变量才会互相影响。
  10. 采用就近原则：如果在全局和{}中存在同名变量，在{}中使用{}中的变量
    在这里插入图片描述
    在这里插入图片描述

3.2 Sass:

Sass中定义变量： $变量名：变量值
Sass中变量的特点：

1.后定义的同名变量会覆盖先定义的同名变量
2.可以把某变量赋值给其他变量
3.区分全局变量和局部变量（就近原则）
4.不会延迟加载：不能先使用后定义

在这里插入图片描述
Sass中变量插值：#{$变量名称}
在这里插入图片描述

4. 运算

css3中calc函数能实现 + - * / 运算

margin-left: calc(-200px / 2);

Less和Sass中也能实现 + - * / 运算

无论是LESS中的运算还是SASS中的运算都需要加上()
在这里插入图片描述在这里插入图片描述

5. Mix in（混合）

将重复的代码封装到一个类中，在需要使用的时候调用该类
如果Min in的后面没有()，则解析成css文件后在css文件中会保留Mix in的代码

<script>
    /*
    LESS中混合定义: .混合名称{} 或者 .混合名称(){}
    LESS中混合调用: .混合名称; 或者 .混合名称();

    SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
    SASS中混合调用: @include 混合名称; 或者 @include 混合名称();
    */
</script>


如果Min in的后面有()，则解析成css文件后在css文件中不会保留Mix in的代码
在这里插入图片描述
在这里插入图片描述

6. 带参数的混合

  1. 带参数，不带默认值
    在这里插入图片描述
    在这里插入图片描述
  2. 带参数，带默认值
    在这里插入图片描述
    在这里插入图片描述
  3. 给指定参数赋值
    在这里插入图片描述

7. 可变参数

7.1 Less

@arguments 能接收传递的实参
在这里插入图片描述
… 可以接收0个到多个参数，如果在形参列表中使用… 必须放在形参列表的最后
在这里插入图片描述

7.2 Sass:


SASS不是使用JS实现的, 所以不能直接在混合中使用arguments
必须通过 $args...的格式来定义可变参数, 然后通过$args来使用
注意点: 和LESS一样可变参数必须写在形参列表的最后

在这里插入图片描述

8. Less中的匹配模式

通用的匹配模式： @_
将相同的代码写在第一个形参是@_的类中
将不同的代码写在第一个字符串形参不是@_的类中
在解析时，会先解析@_类中的代码，再匹配不是@_中的代码
在这里插入图片描述

8.2 Sass:

9. 导入其他less文件@import

<script>
    /*
    和LESS一样SASS文件中也支持导入其它SASS文件
    原生的CSS也支持通过@import导入其它的CSS文件, 只不过不常用
    不常用的原因在于原生的@import导入其它的CSS文件,
    只有执行到@import时浏觅器才会去下载对应 css文件，这导致请求次数变多,页面加载起来特别慢
    而LESS和SASS中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS, 所以只会请求一次, 速度更快
    */
</script>

.less 后缀可以省略
在这里插入图片描述

10. 内置函数

10.1 Less:

<script>
    /*
    由于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)
    */
    // 颜色混合
    /*
    每个RGB 通道相乘，然后除以255
    multiply(color1, color2);
    与 multiply 相反
    screen(color1, color2);
    使之更浅或更暗
    overlay(color1, color2)
    避免太亮或太暗
    softlight(color1, color2)
    与overlay相同，但颜色互换
    hardlight(color1, color2)
    计算每个通道(RGB)基础上的两种颜色的平均值
    average(color1, color2)
    */

</script>

10.2 Sass：

<script>
   // 字符串函数
    /*
    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)：返回一个值在列表中的位置值。
    */
</script>

在这里插入图片描述

11. 伪元素&::before和伪类&:hover

11.1 Less:

在这里插入图片描述

11.2 Sass:

在这里插入图片描述

12. 继承extend

继承和混合的区别：
混合：封装的类会直接拷贝在使用该类的元素中（代码冗余）
继承：并集选择器（不会有代码冗余）

12.1 Less:

在这里插入图片描述

12.2 Sass:

在这里插入图片描述

13. 条件选择

13.1 Less:

less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码
when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断

/*
.size(@width,@height) when (@width = 100px){
  width: @width;
  height: @height;
}
 */
// (),()相当于JS中的||
/*
.size(@width,@height) when (@width = 100px),(@height = 100px){
  width: @width;
  height: @height;
}
 */
// ()and()相当于JS中的&&
/*
.size(@width,@height) when (@width = 100px)and(@height = 100px){
  width: @width;
  height: @height;
}
 */

只有当传入的width的单位是px时，才能执行.size中的代码
在这里插入图片描述

13.2 Sass:

    SASS中支持
    @if(条件语句){}
    @else if(条件语句){}
    ... ...
    @else(条件语句){}
    SASS中当条件不为false或者null时就会执行{}中的代码

在这里插入图片描述

14.Sass支持for和while循环

<script>
    /*
    for循环
    @for $i from 起始整数 through 结束整数{}
    @for $i from 起始整数 to 结束整数{}
    两者的区别 through包头包尾, to包头不包尾

    while循环
    @while(条件语句){}
    */
</script>

在ul中添加10个li：

<body>
<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>
</body>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

jiaody111
发布了119 篇原创文章 · 获赞 1 · 访问量 3992
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_42139212/article/details/102923528
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022