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. CentOS7.2安装MySql5.7并开启远程连接授权

    1.安装mysql5.7 CentOS 7之后的版本yum的默认源中使用MariaDB替代原先MySQL,因此安装方式较为以往有一些改变: 下载mysql的源 wget http://dev.mysq ...

  2. Vue双向绑定简单实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ArrayList 练习题

    1点名器 import java.util.ArrayList; import java.util.Random; import java.util.Scanner; class CallName3 ...

  4. vue-cli3项目中解决动态引入图片img404的问题

    博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~ ...

  5. Kendo UI 模板概述

    Kendo UI 模板概述 Kendo UI 框架提供了一个易用,高性能的 JavaScript 模板引擎.通过模板可以创建一个 HTML 片段然后可以和 JavaScript 数据合并成最终的 HT ...

  6. Hbase region查找过程

    HBase的table是该region切分的,client操作一个row的时候,如何知道这个row对应的region是在哪台Region server上呢?这里有个region location过程. ...

  7. 阿里开发搜索（OpenSearch）的学习与使用

    概述: 开放搜索(OpenSearch)是一款结构化数据搜索托管服务,为移动应用开发者和网站站长提供简单.高效.稳定.低成本和可扩展的搜索解决方案. OpenSearch基于阿里巴巴自主研发的大规模分 ...

  8. 数据结构-List接口-LinkedList类-Set接口-HashSet类-Collection总结

    一.数据结构:4种--<需补充> 1.堆栈结构:     特点:LIFO(后进先出);栈的入口/出口都在顶端位置;压栈就是存元素/弹栈就是取元素;     代表类:Stack;     其 ...

  9. .Net平台互操作技术：02. 技术介绍

    上一篇文章简单介绍了.Net平台互操作技术的面临的主要问题,以及主要的解决方案.本文将重点介绍使用相对较多的P/Invoke技术的实现:C#通过P/Invoke调用Native C++ Dll技术.C ...

  10. 如何在Sierra运行 Specials K 的patch

    https://github.com/ApolloZhu/CORE-Keygen-and-Special-K-for-Sierra-Utility/blob/master/Special%20K%20 ...