CSS预处理语言LESS与SCSS的介绍

friend_ship

已于 2022-12-25 22:25:42 修改

阅读量533

点赞数

分类专栏： css 文章标签： css less scss

于 2022-12-25 22:24:12 首次发布

本文链接：https://blog.csdn.net/friend_ship/article/details/128436624

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

预处理语言出现的背景：

CSS作为一种标记语言可以很好地完成页面样式的定义，但是一些标记语言固有的缺陷也限制了编写CSS的效率。要提高效率，一方面依赖工具，比如编辑器的自动补全；另一方面要依赖于语言本身的改进，但是由于CSS和浏览器以及互联网上的历史数据紧急耦合，由于兼容性问题，目前要设计新的语言来代替CSS是不太现实的。下面将要介绍的CSS预处理语言利用其他编程语言，巧妙地解决了CSS存在的不足。

LESS介绍：

LESS诞生于2009年，是使用JavaScript语言编写的一种CSS预处理语言，它为CSS赋予了编程语言的特性，如变量、继承、运算、函数等。LESS既可以在客户端上运行，也可以借助Node.js或Rhino在服务端运行。

1.使用基础

客户端调试方式：

(1).引用.less样式文件：

<link rel="stylesheet/less" type="text/css" href="http://localhost/styles.less">

* 要设置rel值为“stylesheet/less”。需要引入http链接的.less的样式文件，使用本地的.less文件会报错。

（2）下载less.js，在<head>中引入：

<script src="less.js" type="text/javascript"></script>

* less样式文件一定要在引入less.js前先引入。

2.使用变量和操作符

使用@关键字进行变量的定义。

@color: #00c;

#header {
    color: @color;
}


/* 编译后的css代码 */
#header {
    color: #0000cc;
}

3.使用Mixin混入

Mixin概念在很多编程语言中都有，一般译作混合、混入，是可以重用的代码块。

.rounded-corners(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#main {
    .rounded-corners;
}    

#btn-corners {
    .rounded-corners(8px);
}

/* 编译后的css代码 */

#main {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

#btn-corners {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}

Mixin的语法关键字是一个.符号，可以将其联想记忆为CSS选择器中的类。采用Mixin，实现一次定义，无限使用，既可以大大缩减无谓的重复定义，又提高了代码的可读性和可维护性。

4.内嵌规则

使用嵌套的方式编写层叠样式。

// css的写法
#main div li {
    list-style: none;
}

#main .container {
    margin: 0 auto;
    width: 960px
} 



// 使用less的写法
#main {
    div li {
        list-style: none;
    }

    .container {
        margin: 0 auto;
        width: 960px
    }
}

5.运算

任何数字、颜色或者变量都可以参与运算。

@base: 5px;

@doubleBase: @base * 2;

color: #999 / 3;

border: 1px solid @base*2;

SCSS介绍：

说起SCSS，我们不得不说SASS。SASS是采用Ruby语言编写的一款CSS预处理语言，诞生于2007年，是最早的成熟CSS预处理语言。SASS从第三代开始，完全向下兼容普及的CSS代码，这一代的SASS也被称为SCSS。

1.使用变量

SCSS的变量关键字和PHP一样，都是一个美元符号$开头。

$color: #00c; 

div {
    color: $color;
}


$side: left;
.rounded {
    border-#{$side}-radius: 5px
}

/* 使用scss编译之后 */

div {
    color: #00c;
}

.rounded {
    border-left-radius: 5px;
}

2.计算

允许直接在代码中编写算式，并且支持变量和函数。

$width: 100px;
#main {
    width: $width * 10;
    margin:(20px / 2);
    padding: pi()px;
}

/* 使用scss编译之后 */
#main {
    width: 1000px;
    margin: 40px;
    padding: 3.14159px;
}

3.使用@import导入

@import可以用来插入外部文件；如果插入的是CSS文件，则等同于CSS的import命令。

@import "style.scss";

@import "styles.css";

4.使用@extend继承

支持编程语言中的继承概念。

.class1 {
    border: 1px solid #333;
}

.class2 {
    @extend .class1;
    width: 100px;
}

5.使用@mixin混入

@mixin float_left {
    float: left;
    margin-left: 10px;
}

#main {
    @include float_left;
}

6.使用@function定义函数

@function double($n) {
    @return $n * 2;
}

#sidebar {
    width: double(5px)
}

7.控制语句

编程语言都有程序控制语句，来控制代码的运行方向。SCSS中也有@if、@else、@while等控制语句。

（1）if 语句：

div {
    
    @if lightness($color) > 30% {
        background-color: #333;
    } @else {
        background-color: #fff;
    }
}

(2) for 循环：

@for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid #333;
    }
}

(3) while 循环：

$i: 8;

@while $i > 0 {
    .item-#{$i} {
        width: 2px * $i
    }
}

LESS与SCSS的不同：

后续整理中……

friend_ship

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS预处理语言LESS与SCSS的介绍

CSS预处理语言less与scss的详细内容介绍
复制链接

扫一扫

专栏目录

CSS预处理语言LESS与SCSS的介绍

“相关推荐”对你有帮助么？