CSS预处理器之less和sass
CSS预处理器
1. 基于CSS的另一种语言
2. 通过工具编译成CSS
3. 添加了很多CSS不具备的特性
4. 能提升CSS文件的组织方式
CSS预处理器的作用
1. 帮助更好的组织CSS代码
2. 提高代码复用率
3. 提升可维护性
CSS预处理种类
1. Less 文件后缀名:.less
a) 基于node写的
b) JS写的编译速度快
2. Sass 文件后缀名:.scss
a) Ruby写的C++写的,有node版本:node-sass
CSS预处理器的功能
1. 嵌套:反映层级和约束
2. 变量和计算:减少重复代码
3. Extend和Mixin:代码片段复用
4. 循环:适用于复杂有规律的样式
5. import:CSS文件模块化
预处理器的优缺点
1. 优点:提高代码复用率和可维护性
2. 缺点:需要引入编译过程,有学习成本
less嵌套

&:同级的意思,中间无空格
sass嵌套
与less几乎相同
less变量和计算(变量用@声明)
sass变量和计算(变量用$声明)
less mixin (功能:样式的复用)
类似JS函数写了一个.block的函数调用
sass mixin (功能:样式的复用)
必须要有@mixin声明,block前没有点.
使用上也有区别:调用时要包含@include 并且block前没有点.
Less extend (提取公共样式解决重复CSS代码)
Extend是扩展某一个选择器,因此就不加参数了先定义一个标准的选择器.block
然后通过:extend调用选择器
&符号是同级关系因此有以下相同写法
编译后结果
公共的样式:
独有的样式:
l Extend与mixin的对比:
n extend是将选择器提取出来,将公共的样式写到一起,独有的样式单独写出来。
u extend编译后结果:
n mixin是直接将代码复制过来
u mixin编译后结果:
Sass extend
sass中使用extend的方式使用@extend
运行结果与less结果相同,只是选择器有无换行。
Less loop(循环)
循环生成一个网格:
编译结果:
总共12个
Sass loop
编译结果与less相同
以有更加方便的写法,sass中支持for循环,less中不支持
less import (CSS模块化)
编译结果:
sass import
用法与less基本一样
CSS预处理器框架
1. SASS-Compass
2. Less-Lesshat/EST
3. 提供现成的mixin
4. 类似JS类库:封装常用功能
CSS预处理器之less和sass的更多相关文章
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- css预处理器之一---sass(一)
慕课学习笔记: CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗 ...
- CSS预处理器之Less详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS 预处理器 为什么要有 CSS 预处理器 CSS基本上是设计师的工 ...
- CSS预处理语言——less与sass的使用
我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用 我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动 ...
- CSS预处理器之less
less简单入门 w3cplus--Less讲解 vue中安装less npm install less less-loader --save 注意:在vue中引入less之后,用"> ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- 只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!
有些人想学CSS,不知如何下手:有些人已经学会CSS的各种属性,却不知如何运用:有些人会平面设计,不知道如何与网页设计结合:有些人会HTML,就是学不会CSS.试问自己,图中的技术你都会了吗? 别总是 ...
- css预处理的引入与问题
css的预处理越来越流行.sass,less,stylus这几个都使用方便. 我想使用他的原因,暂时最主要是为了@import的功能.现在的问题:因为产品太多,是个页面,有10个css.而这10个cs ...
- css预处理语言--让你的css编写更加简单方便
CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...
随机推荐
- poj 3974 Palindrome (manacher)
Palindrome Time Limit: 15000MS Memory Limit: 65536K Total Submissions: 12616 Accepted: 4769 Desc ...
- nyoj 1364-治安管理 (INT_MAX)
1364-治安管理 内存限制:128MB 时间限制:3000ms 特判: No 通过数:6 提交数:6 难度:2 题目描述: SZ市是中国改革开放建立的经济特区,是中国改革开放的窗口,已发展为有一定影 ...
- docker入门篇
在网上的教程中,大多数是建议利用linux来安装docker,在此我也建议大家用linux安装,为什么?请看下图 docker使用go语言开发,并且运行在linux系统下,而如果想用window运行, ...
- 小白学习React官方文档看不懂怎么办?
最近在上React课程的时候,发现好多同学不会看文档,所以在这里写一篇文章,希望能给同学们一点点启发. 我们首先打开React官方网站——https://react.docschina.org/doc ...
- Netflix 开源 Polynote:对标 Jupyter,一个笔记本运行多种语言
谈到数据科学领域的开发工具,Jupyter 无疑是非常知名的一种.它具有灵活高效的特点,非常适合进行开发.调试.分享和教学.近日,Netflix(奈飞)居然也玩起了跨界,他们开源了一个名为 Polyn ...
- 元数据管理的重要性 - xms
什么是元数据?引用百科的描述就是:元数据(Metadata),又称中介数据.中继数据,为描述数据的数据(data about data),主要是描述数据属性(property)的信息: 看起来有点抽象 ...
- 今天是python专场UDP socket 链接
type = SOCK_DGRAM UDP 协议的通信优势 允许一个服务器的同时和多个客户端通信 server import socket sk = socket.socket(type=socket ...
- 在React项目中添加ESLint
1. 安装eslint npm install eslint --save-dev // 或者 yarn add eslint --dev 2. 初始化配置文件 npx eslint --init / ...
- 错误 找不到Xcode No such file or directory
- SpringBoot源码学习系列之嵌入式Servlet容器
目录 1.博客前言简单介绍 2.定制servlet容器 3.变换servlet容器 4.servlet容器启动原理 SpringBoot源码学习系列之嵌入式Servlet容器启动原理 @ 1.博客前言 ...