CSS 预处理器框架

可以按照需求来使用别人的代码

1.sass (compass)

2.less (lesshat/EST)

3.提供现成的 mixin

4.类似 JS 类库 ，封装常用功能

css 预处理器常见问题（详细讲解见上篇博客）

1.常见的 css 预处理器

1.Less(Node.js)  2.Sass (Ruby 但有 Node 版本）

2.预处理器作用

1.帮助更好地组织 CSS 代码

2.提高代码复用率

3.提升可维护性

3.预处理器能力

1.嵌套  反映层级和约束

2.变量和计算  减少重复代码

3.Extend 和 Mixin 代码片段

4.循环  适用于复杂有规律的样式

5.import CSS 文件模块化

4.预处理器的优缺点

优点：提高代码复用率和可维护性

缺点：需要引入编译过程 有学习成本

演示：

less

.box{

    .inline-block();

    .opacity(60);

    height: 100px;

    background: green;

    margin:10px;

}

.left{

    float:left;

    .clearfix();

}

.row{

    .make-row();

    .col{

        .make-column(1/4);

        background:red;

        height: 100px;

    }

}

.my-triangle{

    margin:100px;

    // width:100px;

    // height:200px;

    // border: 1px solid red;

}

.my-triangle::after{

    content: ' ';

    .triangle(top left, 100px, red, side);

}

　　html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="7-est.css">

    <title>Document</title>

</head>

<body>

    <div class="box">.box box1</div>

    <div class="box">.box box2</div>

    <div class="left">.left</div>

    <div class="row">

        <div class="col">col1</div>

        <div class="col">col2</div>

        <div class="col">col3</div>

        <div class="col">col4</div>

    </div>

    <div class="my-triangle"></div>

</body>

</html>

　　css

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td {

  padding: 0;

  margin: 0;

  border: 0;

  outline: 0;

  font-weight: inherit;

  font-style: inherit;

  font-family: inherit;

  font-size: 100%;

  vertical-align: baseline;

}

body {

  line-height: 1;

}

ol,

ul {

  list-style: none;

}

table {

  border-collapse: separate;

  border-spacing: 0;

  vertical-align: middle;

}

caption,

th,

td {

  text-align: left;

  font-weight: normal;

  vertical-align: middle;

}

a img {

  border: none;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section,

summary,

main {

  display: block;

  padding: 0;

  margin: 0;

  border: 0;

  outline: 0;

  font-weight: inherit;

  font-style: inherit;

  font-family: inherit;

  font-size: 100%;

  vertical-align: baseline;

}

audio,

canvas,

video {

  display: inline-block;

  *display: inline;

  *zoom: 1;

}

audio:not([controls]),

[hidden] {

  display: none;

}

.box {

  display: inline-block;

  *display: inline;

  *zoom: 1;

  opacity: 0.6;

  filter: alpha(opacity=60);

  height: 100px;

  background: green;

  margin: 10px;

}

.left {

  float: left;

  *zoom: 1;

}

.left:before,

.left:after {

  display: table;

  content: "";

}

.left:after {

  clear: both;

}

.row {

  *zoom: 1;

}

.row:before,

.row:after {

  display: table;

  content: "";

}

.row:after {

  clear: both;

}

.row .col {

  display: block;

  float: left;

  width: 22.75%;

  margin-left: 3%;

  background: red;

  height: 100px;

}

.row .col:first-child {

  margin-left: 0%;

}

.my-triangle {

  margin: 100px;

}

.my-triangle::after {

  content: ' ';

  position: absolute;

  width: 0;

  height: 0;

  border: 50px solid red;

  border-bottom-color: transparent;

  border-right-color: transparent;

  margin-top: -50px;

  margin-left: -50px;

}

　　

CSS 预处理器框架的更多相关文章

  1. CSS 预处理器（框架）初探：Sass、LESS 和 Stylus

    现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...

  2. 为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  3. 详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

    [大伽说]如何运维千台云服务器 »   CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.L ...

  4. 三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  5. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  6. CSS预处理器实践之Sass、Less大比拼[转]

    什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...

  7. Css预处理器实践之Sass、Less大比拼

    xwei | 2012-07-07 | 网页重构 什么是CSS预处理器? Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难 ...

  8. CSS预处理器实践之Sass、Less比较

    什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...

  9. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

随机推荐

  1. yum指令之修复

    折腾着搞 openvpn 网站服务器 yum指令 出了点问题 ------------------------------------------------------------ [root@cl ...

  2. Eclipse - 安装语言包

    Open the install wizard with 'Help' > 'Install new software...' add the Babel p2 repository: http ...

  3. 仙人掌(cactus)

    题目描述LYK 在冲刺清华集训(THUSC)!于是它开始研究仙人掌,它想来和你一起分享它最近研究的结果.如果在一个无向连通图中任意一条边至多属于一个简单环(简单环的定义为每个点至多经过一次),且不存 ...

  4. QrenCode : linux命令行下生成二维码图片

    原文链接:http://wowubuntu.com/qrencode.html # 作者:riku/ / 本文采用CC BY-NC-SA 2.5协议授权,转载请注明本文链接. 对于二维码大家应该并不陌 ...

  5. vue-cli 该如何正确打包iconfont？

    其实这种问题应该问google的: got wrong bootstrap font path after building · Issue #166 · vuejs-templates/webpac ...

  6. cocos2d-android-1学习之旅01

    学习cocos2d-android-1也大概有半个月了,来整理一下自己的学习心得和提出自己的疑问.之所以不学习非常火的cocos2d-x,转而来学习这个网上学习资料少得可怜的cocos2d-andro ...

  7. mongodb安全整理

    本文大都网上参考的,我只是整理了一下 一默认配置情况 1.MongoDB安装时不添加任何参数,默认是没有权限验证的,任何用户都可以登录进来,而且登录的用户可以对数据库任意操作而且可以远程访问数据库,需 ...

  8. HDU 1847 Good Luck in CET-4 Everybody! 四级好运！(博弈)

    思路:先用P/N状态来找规律. N状态:1 2 4 6 8 16 P状态:3 5 因为3=1+2, 无论拿1或者2皆输.看看5,只要抽掉2就变成了3,所以是N状态.看看6,可以抽掉1 2 4,若抽1, ...

  9. 【Python图像特征的音乐序列生成】关于数据库到底在哪里下载

    毕竟原网站一个是14年前的一个是16年前的…… 1,http://ifdo.ca/~seymour/nottingham/nottingham.html 这个网站可以下载zip包. 2,https:/ ...

  10. SAP成都研究院DevOps那些事

    今天的文章来自我的同事平静静,SAP成都研究院一位程序媛.平静静2010年加入SAP,熟悉她的人一般都叫她平静.在她待过的每个小组,平静静都不是最引人瞩目的开发人员,然而她总是能一如既往,保质保量地完 ...