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. asp.net MVC 数据的验证

    join 操作

  2. WPF---数据绑定(二)

    一.绑定到非UI元素 上篇中,我们绑定的数据源均是派生自UIElement的WPF元素.本篇描述的绑定数据源是一个我们自定义的普通的类型. 注:尽管绑定的数据源可以是任意类型的对象,但Path必须总是 ...

  3. C#异步编程 Task await的理解

    async/await是C#5.0中推出的,先上用法: static void Main(string[] args) { Console.WriteLine("-------主线程启动-- ...

  4. Linux的wget命令详解

    [转载] Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器.如果我们使用虚拟主机, ...

  5. rabbitMq可靠性投递之手动ACK

    #手动应答#spring.rabbitmq.listener.simple.acknowledge-mode=manual#spring.rabbitmq.listener.simple.acknow ...

  6. 分布式协调组件Zookeeper之 选举机制与ZAB协议

    Zookeeper简介: Zookeeper是什么: Zookeeper 是⼀个分布式协调服务的开源框架. 主要⽤来解决分布式集群中应⽤系统的⼀致性问题, 例如怎样避免同时操作同⼀数据造成脏读的问题. ...

  7. MySQL大数据迁移备份

    MySQL迁移通常使用的有三种方法:   1.数据库直接导出,拷贝文件到新服务器,在新服务器上导入. 2.使用第三方迁移工具. 3.数据文件和库表结构文件直接拷贝到新服务器,挂载到同样配置的MySQL ...

  8. APMServ中Apache启动失败的原因

    APMServ中Apache启动失败绝大多数的情况是因为APMServ得路径出错和80端口被占用,也有可能您使用的是WIN8系统,下面SJY根据不同情况告诉大家如何解决APMServ中Apache启动 ...

  9. 手撕LRU缓存了解一下

    面试官:来了,老弟,LRU缓存实现一下? 我:直接LinkedHashMap就好了. 面试官:不要用现有的实现,自己实现一个. 我:..... 面试官:回去等消息吧.... 大家好,我是程序员学长,今 ...

  10. AndroidJetpack Fragment之Navigation和ViewPager2

    新的Fragment导航方式:Navigation 1.创建若干个fragment 2.添加导航 1)新建Navigation:右键res文件夹,New->Android Resource Fi ...