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. 用安全密钥验证ssh

    1.需要打开两台虚拟机,并保证两台虚拟机可以ping通: 本地主机IP:192.168.8.120 远程主机IP:192.168.8.100 2.在本地主机生成密钥对,输入命令“ssh-keygen” ...

  2. linux命令--文件目录操作命令

    一.命令的基本格式 1.命令提示符 [root@love2 ~]# []:这是提示符的分隔符号,没有特殊含义. root:显示的是当前的登录用户. @:分隔符号,没有特殊含义.love2:当前系统的主 ...

  3. 解构ffmpeg(二)

    通过比较DirectShow和ffmpeg两者的FilterGraph,分析ffmpeg的FilterGraph运作. 首先FilterGraph是一个图,图由点和边构成.在FilterGraph中的 ...

  4. python_06

    今日内容:注意: selenium驱动的浏览器是干净的,没有任何缓存. 1.selenium剩余用法 2.selenium万能登录破解 3.selenium爬取京东商品信息 4.破解极验滑动验证码 X ...

  5. 🙀Java 又双叒叕发布新版本,这么多版本如何灵活管理?

    文章来源:http://1t.click/bjAG 前言 不知不觉 JDK13 发布已有两个月,不知道各位有没有下载学习体验一番?每次下载安装之后,需要重新配置一下 Java 环境变量.等到运行平时的 ...

  6. Nvm安装步骤

    下载地址 https://github.com/coreybutler/nvm-windows/releases 解压压缩包,后是一个.exe结尾的安装文件,双击安装, 选择安装位置,如下图: 设置n ...

  7. 投票通过,PHP 8 确认引入 Union Types 2.0

    关于是否要在 PHP 8 中引入 Union Types 的投票已于近日结束,投票结果显示有 61 名 PHP 开发组成员投了赞成票,5 名投了反对票. 还留意到鸟哥在投票中投了反对票~) 因此根据投 ...

  8. 使用RNN进行imdb影评情感识别--use RNN to sentiment analysis

    原创帖子,转载请说明出处 一.RNN神经网络结构 RNN隐藏层神经元的连接方式和普通神经网路的连接方式有一个非常明显的区别,就是同一层的神经元的输出也成为了这一层神经元的输入.当然同一时刻的输出是不可 ...

  9. k8s Ingress 理解和部署

    目录 前言 Ingress 与 ingress-controller Ingress 部署 1.部署 ingress-controller 2.部署测试 web 服务 3.部署 Ingress 4.检 ...

  10. 【Luogu P1967】货车运输

    Luogu P1967 题目大意:给定一张图和q个询问,询问x节点和y节点的路径之间最小边权最大可以是多少. 可以发现对于一条边\(E(x,y)\),如果x到y有另一条路径且最小边权大于\(E(x,y ...