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. MySQL 实现字符串换行

    target_describe字段值中包含 :[ 这两个特殊的字符 ,想要在字符之间加换行 需要插入CHAR(10) ),'[')) UPDATE ew_pm_project_red_detail S ...

  2. MySQL 如何在一个语句中更新一个数值后返回该值 -- 自增长种子竞态问题处理

    什么是竞态问题? 假设有一个计数器,首先当前值自增长,然后获取到自增长之后的当前值.自增长后的值有可能被有些操作用来当做唯一性标识,因此并发的操作不能允许取得相同的值. 为什么不能使用使用UPDATE ...

  3. springboot项目实现批量新增功能

    这个困扰我一整天东西,终于解决了. 首先是mybatis中的批量新增sql语句. 注意:这里我给的是我需要新增的字段,你们改成你们需要的字段. <insert id="insertBa ...

  4. OpenSSL中关于RSA_new和RSA_free的内存泄漏

    这个具体的问题问题代码如下: RSA *rsaKey=RSA_new(); rsaKey = RSA_generate_key(keyBits,,NULL,NULL); RSA_free(rsaKey ...

  5. Docker搭建

    环境基于CentOS64位,内核最好3.10. 1.下载安装 docker      dockersudo yum install docker-io (假如内核版本太低的话,会在下载安装Docker ...

  6. MVC web api转换JSON 的方法

  7. Processing一些常用技巧

    一些常用技巧总结: Tweak模式 快速查找函数用法 显示与输入中文注释 代码快速对齐 批量添加注释符 Tweak模式 Tweak模式是非常有用的功能,自3.0版本后,它就正式整合到Processin ...

  8. 剑指offer22 栈的压入、弹出序列

    写的一个代码,虽然正确通过了,但我觉得会报vector越界的错误 class Solution { public: bool IsPopOrder(vector<int> pushV,ve ...

  9. Java写诗程序

    import java.util.Random; public class test_word { public static void main(String[] args) { System.ou ...

  10. javaweb基础(22)_Servlet+JSP+JavaBean实战登陆

    一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...