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类库:封装常用功能

原文地址:https://www.cnblogs.com/nayek/p/11747751.html

时间: 2024-10-07 22:55:08

CSS预处理器之less和sass的相关文章

css预处理器之一---sass(一)

 慕课学习笔记分享: CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗的说,"CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题",例如你可以在 CSS 中使用变量.简单的逻辑程序.函数(如右侧代码编辑器中就使用了变

CSS预处理器之Less详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS 预处理器 为什么要有 CSS 预处理器 CSS基本上是设计师的工具,不是程序员的工具.在程序员的眼里,CSS是很头痛的事情,它并不像其它程序语言,比如说PHP.Javascript等等,有自己的变量.常量.条件语句以及一些编程语法,只是一行行单纯的属性描述,写起来相当的费事,而且代码难以组织和维护. 很自然的,有人就开始在想,能不能给CSS像其他程序语言一样,加

CSS预处理语言——less与sass的使用

我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用 我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动,比较麻烦 首先我们来说一下Less. [Less中的变量] 1.声明变量使用 @变量名:变量值: 2.使用变量 @变量名 >>less中的变量类型: ①数字类 1 10px ②字符串:无引号字符串 red 和有引号字符串"gdak" ③颜色类 red #000000 rgb(

css预处理scss环境配置

css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该环境将css预处理的语言编译成正常的css文件; sass与scss 学习网站:  http://sass.bootcss.com/ sass是采用Ruby语言编写的一款css预处理语言.Sass的缩进语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sa

前端面试:css预处理

css预处理定义: 定义了一种新的语言,其基本思想是用一种专门编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 几种预处理语言 sass less stylus turbine swithch css css cacheer dt css

谈谈CSS预处理技术中for循环的应用-CSS Sprite

各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体验的同时也方便开发者: 在前端优化时,我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,background-position来定位现实不同效果,这样来达到减少HTTP请求,毕竟HTTP请求是相当昂贵的,但是HTTP请求是少了,开发人员工作量就大了,要定位图片不是一件很方便的事情,非常麻烦,要一个一个地计算: 其实我们可以有点技巧,让图片排列有点规律,这样可以减少大量时间: 假如我们的图

9.14-9.18随笔之一(CSS扩展技术:LESS SASS)

less css是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性;SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状.混入.选择子继承等功能,可以更有效有弹性的写出Stylesheet. less是一种语法,使用需要编译器将其编为CSS才能使用,通过less 我们可以在编写css时设置变量(@变量名).运用继承.嵌套等,更方便CSS的编写和维护,我最为喜欢的便是这两种技术中可嵌套的编写方法,对于初学者来说尤为实用,在less中

只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!

有些人想学CSS,不知如何下手:有些人已经学会CSS的各种属性,却不知如何运用:有些人会平面设计,不知道如何与网页设计结合:有些人会HTML,就是学不会CSS.试问自己,图中的技术你都会了吗? 别总是怨天尤人了,<CSS高效开发实战-CSS 3.LESS.SASS.Bootstrap.Foundation>书写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具.框架.预处理来提升开发效率和节约人力成本,确保所讲解的内容读者都能活学活用. 曾就职于CSDN和淘宝的一

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1  设定背景图的大小 在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要