Css预编译(Sass&&Less)
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)的更多相关文章
- css预编译--sass进阶篇
基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则. 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等,熟悉JS ...
- CSS预编译与PostCSS以及Webpack构建CSS综合方案
CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...
- css预处理器sass学习
SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先 ...
- sublime中如何用less实现css预编译
实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...
- sublime中用less实现css预编译
实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
随机推荐
- element ui loading加载开启与关闭
参考:https://blog.csdn.net/qq_41877107/article/details/87690555 Vue项目引入element-ui,之后,将以下代码写入 mounted() ...
- spring boot 2.0.0 + shiro + redis实现前后端分离的项目
简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大 ...
- ArcGIS Engine中实现ArcMap的捕捉效果
注意要将捕捉相关接口的对象放在OnCreate方法中,这样在初始化就可以有捕捉效果,(捕捉对象赋值放在OnClick中出现第一次点击之前不能捕捉的BUG) 这里是直接在工具中实现的 ,可以按需求将捕捉 ...
- hive -- 外部表、内部表、临时表
1.外部表 关键字:EXTERNAL 外部表创建时需要指定LOCATION 删除外部表时,数据不被删除 CREATE EXTERNAL TABLE page_view(viewTime INT, us ...
- leaflet加载离线OSM(OpenStreetMap)
本文为博主原创,如需转载需要署名出处. leaflet作为广为应用的开源地图操作的API,是非常受欢迎,轻量级的代码让使用者更容易操作. 废话不多说,下面直接给出范例. 首先在这个网站下载leafle ...
- Redis cluster的部署
Redis 集群是一个提供在多个Redis间节点间共享数据的程序集. Redis集群并不支持处理多个keys的命令,因为这需要在不同的节点间移动数据,从而达不到像Redis那样的性能,在高负载的情况下 ...
- vue 引用 tcplayer 做直播( 俩个例子,都可以用。替换直播地址即可,后端推流,前端观看。 )
例子一比例子二更加容易被理解.另外 m3u8 也支持 webrtc 开头的直播地址. 补充JS 得下载到本地,自行引入: https://imgcache.qq.com/open/qcloud/liv ...
- thymeleaf+layui加载页面渲染时报错
将freemaker替换成thymeleaf时出现以下问题: org.thymeleaf.exceptions.TemplateProcessingException: Could not parse ...
- Dubbo(一)——
https://www.cnblogs.com/ideal-20/p/14095919.html#_label24 https://segmentfault.com/a/119000001989672 ...
- Python - repr()、str() 的区别
总的来说 str():将传入的值转换为适合人阅读的字符串形式 repr():将传入的值转换为 Python 解释器可读取的字符串形式 传入整型 # number resp = str(1) print ...