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的更多相关文章

  1. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

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

    慕课学习笔记: CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗 ...

  3. CSS预处理器之Less详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS 预处理器 为什么要有 CSS 预处理器 CSS基本上是设计师的工 ...

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

    我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用 我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动 ...

  5. CSS预处理器之less

    less简单入门 w3cplus--Less讲解 vue中安装less npm install less less-loader --save 注意:在vue中引入less之后,用"> ...

  6. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

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

    有些人想学CSS,不知如何下手:有些人已经学会CSS的各种属性,却不知如何运用:有些人会平面设计,不知道如何与网页设计结合:有些人会HTML,就是学不会CSS.试问自己,图中的技术你都会了吗? 别总是 ...

  8. css预处理的引入与问题

    css的预处理越来越流行.sass,less,stylus这几个都使用方便. 我想使用他的原因,暂时最主要是为了@import的功能.现在的问题:因为产品太多,是个页面,有10个css.而这10个cs ...

  9. css预处理语言--让你的css编写更加简单方便

    CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...

随机推荐

  1. poj 3974 Palindrome (manacher)

    Palindrome Time Limit: 15000MS   Memory Limit: 65536K Total Submissions: 12616   Accepted: 4769 Desc ...

  2. nyoj 1364-治安管理 (INT_MAX)

    1364-治安管理 内存限制:128MB 时间限制:3000ms 特判: No 通过数:6 提交数:6 难度:2 题目描述: SZ市是中国改革开放建立的经济特区,是中国改革开放的窗口,已发展为有一定影 ...

  3. docker入门篇

    在网上的教程中,大多数是建议利用linux来安装docker,在此我也建议大家用linux安装,为什么?请看下图 docker使用go语言开发,并且运行在linux系统下,而如果想用window运行, ...

  4. 小白学习React官方文档看不懂怎么办?

    最近在上React课程的时候,发现好多同学不会看文档,所以在这里写一篇文章,希望能给同学们一点点启发. 我们首先打开React官方网站——https://react.docschina.org/doc ...

  5. Netflix 开源 Polynote:对标 Jupyter,一个笔记本运行多种语言

    谈到数据科学领域的开发工具,Jupyter 无疑是非常知名的一种.它具有灵活高效的特点,非常适合进行开发.调试.分享和教学.近日,Netflix(奈飞)居然也玩起了跨界,他们开源了一个名为 Polyn ...

  6. 元数据管理的重要性 - xms

    什么是元数据?引用百科的描述就是:元数据(Metadata),又称中介数据.中继数据,为描述数据的数据(data about data),主要是描述数据属性(property)的信息: 看起来有点抽象 ...

  7. 今天是python专场UDP socket 链接

    type = SOCK_DGRAM UDP 协议的通信优势 允许一个服务器的同时和多个客户端通信 server import socket sk = socket.socket(type=socket ...

  8. 在React项目中添加ESLint

    1. 安装eslint npm install eslint --save-dev // 或者 yarn add eslint --dev 2. 初始化配置文件 npx eslint --init / ...

  9. 错误 找不到Xcode No such file or directory

  10. SpringBoot源码学习系列之嵌入式Servlet容器

    目录 1.博客前言简单介绍 2.定制servlet容器 3.变换servlet容器 4.servlet容器启动原理 SpringBoot源码学习系列之嵌入式Servlet容器启动原理 @ 1.博客前言 ...