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. 首先我们 ...
随机推荐
- asp.net MVC 数据的验证
join 操作
- WPF---数据绑定(二)
一.绑定到非UI元素 上篇中,我们绑定的数据源均是派生自UIElement的WPF元素.本篇描述的绑定数据源是一个我们自定义的普通的类型. 注:尽管绑定的数据源可以是任意类型的对象,但Path必须总是 ...
- C#异步编程 Task await的理解
async/await是C#5.0中推出的,先上用法: static void Main(string[] args) { Console.WriteLine("-------主线程启动-- ...
- Linux的wget命令详解
[转载] Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器.如果我们使用虚拟主机, ...
- rabbitMq可靠性投递之手动ACK
#手动应答#spring.rabbitmq.listener.simple.acknowledge-mode=manual#spring.rabbitmq.listener.simple.acknow ...
- 分布式协调组件Zookeeper之 选举机制与ZAB协议
Zookeeper简介: Zookeeper是什么: Zookeeper 是⼀个分布式协调服务的开源框架. 主要⽤来解决分布式集群中应⽤系统的⼀致性问题, 例如怎样避免同时操作同⼀数据造成脏读的问题. ...
- MySQL大数据迁移备份
MySQL迁移通常使用的有三种方法: 1.数据库直接导出,拷贝文件到新服务器,在新服务器上导入. 2.使用第三方迁移工具. 3.数据文件和库表结构文件直接拷贝到新服务器,挂载到同样配置的MySQL ...
- APMServ中Apache启动失败的原因
APMServ中Apache启动失败绝大多数的情况是因为APMServ得路径出错和80端口被占用,也有可能您使用的是WIN8系统,下面SJY根据不同情况告诉大家如何解决APMServ中Apache启动 ...
- 手撕LRU缓存了解一下
面试官:来了,老弟,LRU缓存实现一下? 我:直接LinkedHashMap就好了. 面试官:不要用现有的实现,自己实现一个. 我:..... 面试官:回去等消息吧.... 大家好,我是程序员学长,今 ...
- AndroidJetpack Fragment之Navigation和ViewPager2
新的Fragment导航方式:Navigation 1.创建若干个fragment 2.添加导航 1)新建Navigation:右键res文件夹,New->Android Resource Fi ...