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. linux basename命令的使用

    用途 返回一个字符串参数的基本文件名称. 语法 basename String [ Suffix ] 描述 basename 命令读取 String 参数,删除以 /(斜杠) 结尾的前缀以及任何指定的 ...

  2. 01SpringBase

    Spring (容器) 概述: 01.Java EE开发者的春天 02.主要目的是 降低业务逻辑层和其他层的耦合度 IOC 03.spring容器是用来创建(new)和管理(对象之间的关系)程序中所有 ...

  3. css3的animation动画

    animation 设置对象的动画特效   有6个主要的值 animation-name   动画名称 animation-duration   动画持续时间 animation-timing-fun ...

  4. 零基础逆向工程21_PE结构05_数据目录表_导出表

    数据目录 1.我们所了解的PE分为头和节,在每个节中,都包含了我们写的一些代码和数据,但还有一些非常重要 的信息是编译器替我们加到PE文件中的,这些信息可能存在在任何可以利用的地方. 2.这些信息之所 ...

  5. git如何强制用远程分支更新本地

    git本地即使有修改如何强制更新: 本地有修改和提交,如何强制用远程的库更新本地.我尝试过用git pull -f,总是提示 You have not concluded your merge. (M ...

  6. Mongodb之failed to create service entry worker thread

    Mongodb "failed to create service entry worker thread" 错误. 系统:CentOS release 6.8 mongod.lo ...

  7. 解决nginx bind() to 0.0.0.0:80 failed 问题

    nginx的配置文件一开始默认是80端口,出现这个错误多半是80端口已经被占用.这时候只需要把 server { listen 8088; server_name localhost lcsf.com ...

  8. 撤销git pull命令

    比如:在master分支上执行了git pull命令,想回到pull之前分支所在的commit位置. 步骤一:用 git reflog master 查看master分支的历史变动记录,其中有一个就是 ...

  9. Ajax的原理及Django上传组件

    title: Ajax的原理及Django上传组件 tags: Django --- Ajax的原理及Django上传组件 Ajax的原理 ajax 是异步JavaScript和xml ajax就是向 ...

  10. java基础——Map集合

    Map以键值对的形式存储数据,其中Map.entry,是Map的内部类,它用来描述Map中的键值对.Map是一个接口,HashMap是他的一个实现类 Map中有几个重要的方法: get(Object ...