Less与Sass是css的预处理技术

而CoffeeScript、TypeScript则是javascript的预处理技术。

一、Less

Less是一种动态样式语言,是一门css预处理语言,扩展了css语言,增加了变量,运算,嵌套等一系列功能

1.1 变量

语法:@变量名:变量值;

存在作用域:局部作用域>全局作用域

以@开头,后面输入变量名.

实例:

@color:red;
@size:18px;
.div{
background-color:@color;
font-size:@size;
...
} //翻译后
.div{
background-color:red;
font-size:@size;
...
}

1.2 混入

定义一个函数,写入参数值,可调用

内置变量@arguments代表所有参数(运行时)的值

相当于一个模板,将模板引入,再写入参数即可使用

如:

.circle(@width:100px,@color:red,@height:100px){
width:@width;
color:red;
height:100px;
font-size:18px;
}
.c1{
.circle(); //不带参数引入
.circle(200px,blue)//带两个参数
.circle
...
} //翻译后 .c1{
width:100px;
//带参数为: width:200px;
color:red;
//带参数为: color:blue;
height:100px;
font-size:18px;
}

1.3 嵌套

允许将多个选择器嵌套在一起,

&表示当前选择器的父选择器

例:

.cor{
color:red;
.ten{font-size:12px;}
&#sub{width:100px;}
} //翻译后
.cor{
color:red;
}
.cor .ten{
font-size:12px;
}
.cor#sub{
width:100px;
}

1.4 运算

less拥有强大的运算能力,针对数字,颜色,变量的操作,支持加、减、乘、除或更复杂的综合运算!

例:

@file:5%;
@base-color:lightblue;
.cor{
width:@file * 10; //50%
background-color: @base-color + #111;
}

1.5 继承

让一个样式继承另一个样式

例:

.cor{
width:100px;
color:red;
}
.cor2{
&:extend(.cor);
font-size:15px;
}
.cor3{
&:extend(.cor);
} //翻译后
.cor,
.cor2,
.cor3{
width:100px;
color:red;
}
.cor2{
font-size:15px;
}

1.6 作用域

局部作用域>全局作用域

同一级变量,后者会覆盖前者

例:

@name:30px;
.cor{
@name:20px; font-size:@name; //20px }
@name:18px
.cor2{
font-size:@name; //18px
}

1.7 循环

在Less中,可以调用本身

例:

.cor(@name) when (@name > 0){
.cor((@name - 1))
width:(@name * 10px);
} .ten{
.cor(3);
} //翻译后 .ten{
width:10px;
width:20px;
width:30px;
}

二、Sass

2.1 变量

使用符号:$标识符

<!--定义变量-->
$width:1000px;
$height:500px; .box{
width:$width;
height:$height;
}

2.2 嵌套

略,与less相同

2.3 导入

@import

reset.scss 文件

$width:900px;
$color:blue;
*{
background-color:$color;
width:$width;
}

scss代码

@import "reset"

.box{
width:200px;
} <!--翻译后--> *{
background-color:$color;
width:$width;
} .box{
width:200px;
}

2.4 mixin 混入

sass中用mixin定义一些代码段,可传参数,

定义时用@mixin

调用时用@include

例:

@mixin cir($size:100px,$color:red,$px:14px){
width:$size;
background-color:$color;
font-size:$px;
} .cls{
@include cir();<!--调用--> @include cir(150px); @include cir(150px,blue,20px);
} 翻译后 .cls{
width:100px;
background-color:red;
font-size:14px;
------------------------
width:150px;
background-color:red;
font-size:14px;
------------------------
width:150px;
background-color:blue;
font-size:20px;
}

2.5 继承/扩展

通过@extend来实现代码组合

例:

.state{
background-color:red;
} .state2{
@extend .state
background-color:blue;
font-size:12px;
} 翻译后 .state,.state2{
background-color:red;
} .state2{
background-color:blue;
font-size:12px;
}

2.6 sass运算

sass可以进行复杂的运算

2.7 函数

sass集成了大量的颜色函数,让变换颜色更加简单

例:

$pcolor:#999ccc;

.cls:hover{
darken:黑暗
background-color:darken($pcolor,15%);
<!--变暗15%--> lighten:照亮
background-color:lighten($pcolor,15%);
<!--变亮15%-->
}

2.8 流程控制

sass中拥有流程控制语句,如:if,for,while,each等

例:

/*如果i是3的倍数,则下划线*/
@if $i%3==0 {
text-decoration: underline;
}

Css预编译(Sass&&Less)的更多相关文章

  1. css预编译--sass进阶篇

    基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则. 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等,熟悉JS ...

  2. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  3. css预处理器sass学习

    SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先 ...

  4. sublime中如何用less实现css预编译

    实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...

  5. sublime中用less实现css预编译

    实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...

  6. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  7. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  8. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  9. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

随机推荐

  1. element ui loading加载开启与关闭

    参考:https://blog.csdn.net/qq_41877107/article/details/87690555 Vue项目引入element-ui,之后,将以下代码写入 mounted() ...

  2. spring boot 2.0.0 + shiro + redis实现前后端分离的项目

    简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大 ...

  3. ArcGIS Engine中实现ArcMap的捕捉效果

    注意要将捕捉相关接口的对象放在OnCreate方法中,这样在初始化就可以有捕捉效果,(捕捉对象赋值放在OnClick中出现第一次点击之前不能捕捉的BUG) 这里是直接在工具中实现的 ,可以按需求将捕捉 ...

  4. hive -- 外部表、内部表、临时表

    1.外部表 关键字:EXTERNAL 外部表创建时需要指定LOCATION 删除外部表时,数据不被删除 CREATE EXTERNAL TABLE page_view(viewTime INT, us ...

  5. leaflet加载离线OSM(OpenStreetMap)

    本文为博主原创,如需转载需要署名出处. leaflet作为广为应用的开源地图操作的API,是非常受欢迎,轻量级的代码让使用者更容易操作. 废话不多说,下面直接给出范例. 首先在这个网站下载leafle ...

  6. Redis cluster的部署

    Redis 集群是一个提供在多个Redis间节点间共享数据的程序集. Redis集群并不支持处理多个keys的命令,因为这需要在不同的节点间移动数据,从而达不到像Redis那样的性能,在高负载的情况下 ...

  7. vue 引用 tcplayer 做直播( 俩个例子,都可以用。替换直播地址即可,后端推流,前端观看。 )

    例子一比例子二更加容易被理解.另外 m3u8 也支持 webrtc 开头的直播地址. 补充JS 得下载到本地,自行引入: https://imgcache.qq.com/open/qcloud/liv ...

  8. thymeleaf+layui加载页面渲染时报错

    将freemaker替换成thymeleaf时出现以下问题: org.thymeleaf.exceptions.TemplateProcessingException: Could not parse ...

  9. Dubbo(一)——

    https://www.cnblogs.com/ideal-20/p/14095919.html#_label24 https://segmentfault.com/a/119000001989672 ...

  10. Python - repr()、str() 的区别

    总的来说 str():将传入的值转换为适合人阅读的字符串形式 repr():将传入的值转换为 Python 解释器可读取的字符串形式 传入整型 # number resp = str(1) print ...