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. C#oracle还原imp实例

    C#来做oracle还原,调用oracle自带函数imp.exe时,需要注意的是:1.imp.exe 中fromuser 和touser两个关键字: fromuser与exp.exe中的owner对应 ...

  2. 字符串和byte数组的相互转化

    关于byte[]数组转十六进制字符串: public static String getHexString(byte[] b) throws Exception { String result = & ...

  3. JAVA 员工管理系统（用抽象类实现），简易版。

    package Demo513; /* 定义一个Employee类,该类包含: private 成员变量name,number,birthday,其中birthday为MyDate类的对象: abst ...

  4. Redis sorted set（有序集合）

    Redis 有序集合是string类型元素的集合,元素不允许重复. 有序集合中的每个元素都会关联一个数值型的分数.redis正是通过分数来为集合中的成员进行从小到大的排序. 有序集合的成员是唯一的(不 ...

  5. AngularJS（六）：表单-复选框

    本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾 ...

  6. （笔记）快速入门PADS logic 到 layout

    以前从未接触过画板,先是硬着头皮边学边操作<Layout2007中文教程之PADS_Logic>,刚好在中秋节前把这个教程从头到尾通学了一遍,随后感觉这个教程有了方方面面但没有工程的系统性 ...

  7. Android 使用RecyclerView实现多行水平分页的GridView效果和ViewPager效果

    前些天看到有人在论坛上问这种效果怎么实现,没写过也没用过这个功能,网上查了一下,大多是使用ViewPager+GridView或者HorizontalScrollView+GridView实现,不过貌 ...

  8. Android笔记--BroadcastReceiver

    BroadcastReceiver(一)--用法总结 一. BroadcastReceiver简介 BroadcastReceiver是Android四大组件之一,他的作用是监听并且接受系统或者其他A ...

  9. [学习笔记] SSD代码笔记 + EifficientNet backbone 练习

    SSD代码笔记 + EifficientNet backbone 练习 ssd代码完全ok了,然后用最近性能和速度都非常牛的Eifficient Net做backbone设计了自己的TinySSD网络 ...

  10. 因 URL 意外地以“/HelloWorld”结束，请求格式无法识别。

    web.config文件中的 <system.web> 节点下加入:<webServices>    <protocols>        <add name ...