cnpm install --save-dev sass-loader
//sass-loader依赖于node-sass
cnpm install --save-dev node-sass
//实现BEM的模式
.block { color: red;
@at-root #{&}-green{
color: green;
} //继承
.row {
@extend .fn-clearfix;
} //循环
@for $i from 1 to 12{
.t#{$i} {
top: ($lh*$i);
}
} /*栅格*/
$gridColumns: 12 !default;
$gridGutter: 20px !default;
.row {
margin-right: -$gridGutter / 2;
margin-left: -$gridGutter / 2;
@extend .fn-clearfix;
}
%col{
float:left; min-height: 1px;padding-left:$gridGutter / 2; padding-right:$gridGutter / 2;
} @for $i from 1 through 12 {//to 不包含12
.col-md-#{$i} {
@extend %col;
float: left;
width: $i/$gridColumns*100%;
}
}

$file-types:doc pdf txt xls rar mp4;
@each $type in $file-types{
.#{$type}{
background-image: url(/static/images/#{$type}.png);
}
}

SASS常用方法的更多相关文章

  1. fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用

    使用fullpage的步骤   1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...

  2. requireJs sass侧边栏

    koala 下载 将sass编译为css文件 1 嵌套 2 $变量 3 @mixin 函数名(参数) 4 @include 函数    调用 5 @import "xxx"   引 ...

  3. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  4. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  5. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  6. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  7. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  8. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  9. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

随机推荐

  1. 洛谷 P1501 [国家集训队]Tree II Link-Cut-Tree

    Code: #include <cstdio> #include <algorithm> #include <cstring> #include <strin ...

  2. 使用let's encrypt为你的Ubuntu14+nginx网站保驾护航!

    finch最近正在研究一个新的网站系统,闲的没事想搞搞ssl,结果搞了两天,遇到很多问题,现在记录并分享一下经验. 环境之前搭建好了是Ubuntu14+nginx+php5+mysql 现在开始使用l ...

  3. NetHogs---按进程或程序实时统计网络带宽使用率。

    NetHogs是一个开源的命令行工具(类似于Linux的top命令),用来按进程或程序实时统计网络带宽使用率. 来自NetHogs项目网站: NetHogs是一个小型的net top工具,不像大多数工 ...

  4. uname---用于打印当前系统相关信息

    uname命令用于打印当前系统相关信息(内核版本号.硬件架构.主机名称和操作系统类型等). 语法 uname(选项) 选项 -a或--all:显示全部的信息: -m或--machine:显示电脑类型: ...

  5. PHP实现几种经典算法详解

    前言 在编写JavaScript代码的时候存在一些对于数组的方法,可能涉及的页面会很多,然后每次去写一堆代码.长期下去代码会特别的繁多,是时候进行一波封装了,话不多说开始书写优美的代码 代码已上传gi ...

  6. Python实现快排

    Python实现快排 def quicksort(arr): if len(arr) <= 1: return arr pivot = arr[len(arr) // 2] left = [x ...

  7. Unity C# 设计模式(四)抽象工厂模式

    定义: 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 工厂方法模式针对的是一个产品等级结构:而抽象工厂模式针对的是多个产品等级结构. 抽象工厂模式使用同一个 工厂等级结构负责这 ...

  8. [Python] Pandas load DataFrames

    Create an empty Data frame with date index: import pandas as pd def test_run(): start_date='2017-11- ...

  9. uvalive 6669 hidden tree(好壮压dp)

    题目见option=com_onlinejudge&Itemid=8&page=show_problem&problem=4681">here 题意:给一个序列 ...

  10. 鸟哥的Linux私房菜-----15、例行性命令at与crontab