看慕课网materliu前辈的sass教程,http://www.imooc.com/learn/364。顺便把刚做完的项目重构一下,然后把一些笔记和心得都写在这里~

  首先安装sass,这里直接参考 大漠前辈的安装教程 http://www.w3cplus.com/sassguide/install.html

  然后安装compass, 在ruby command 里面打命令,gem install compass 就好了;就现阶段来说,对compass理解的不是很多,看完sass那个视频之后就觉得暂时只是用来编译scss文件和压缩css(雾)。

  compass指令:

  compass create compass;

  compass watch;

  sass语法:

  当文件不用编译的时候,可以用_前缀下划线来标记然后命名,通常函数或者变量都放在一个文件夹里面。

  文件引进来可以用import ,文件名后缀可以不用写, 然而这个不是css原生的import。

  css原生的import两大弊端:1、一定要放在代码最前面。2、对性能不利。如果真的要使用原生的import,那么就要:1、以css结尾的时候。2、http://开头。3、URL()函数。4、带有media queries。

  sass变量:好东西,譬如每次找颜色的时候,颜色代码都记不住,如果用变量的话就不用这么慢慢找颜色代码了,直接看一下变量文件,一目了然咯。

    特殊变量,在特定情况下使用的变量;

    eg:

    

//普通变量及其使用
$common-ff :"微软雅黑"; //字体设置
body{
font-family: $common-ff;
}
//css输出----
body{
font-family: "微软雅黑";
} //特殊变量
$direction: top;
//应用于class和属性
.border-#{$direction}{
border-#{$direction}:1px solid #ccc;
}
//应用于特殊属性同理

    多值变量:顾名思义就是多个值咯。譬如 0 1px 2px 3px之类的。里面的函数有很多,暂时只用过append($list,$value,[$separator]),这个函数。

  mixin:通过@mixin声明,@include 调用;

  以前在做项目的时候用手淘的flexible写了很多这样的样式

button,input,textarea{
font-size: 12px;
}
[data-dpr="2"] button,
[data-dpr="2"] input,
[data-dpr="2"] textarea{
font-size: 24px;
}
[data-dpr="3"] button,
[data-dpr="3"] input,
[data-dpr="3"] textarea{
font-size: 36px;
}

  这样写太麻烦了,然后学了sass之后就参考手淘他们写的混合宏自己写了一个

@mixin property-dpr($property,$px-values){
//判断参数是不是单个数字,若是
@if type-of($px-values) == "number"{
#{$property}: $px-values;
[data-dpr="2"] & {
#{$property}: $px-values * 2;
}
[data-dpr="3"] & {
#{$property}: $px-values * 3;
}
}
//若为数组则
@else {
//新建两个空数组
$twodpr-values:();
$threedpr-values:();
//遍历多值变量
@each $value in $px-values{
$twodpr-values:append($twodpr-values,$value*2);
$threedpr-values:append($threedpr-values,$value*3)
}
// 返回处理后的多值变量
#{$property}: $px-values;
[data-dpr="2"] & {
#{$property}: $twodpr-values;
}
[data-dpr="3"] & {
#{$property}: $threedpr-values;
}
}
}

  css、sass生成代码:

//调用mixin
div{
@include property-dpr(font-size,12px);
}
//css style
div {
font-size: 12px;
}
/* line 7, ../../sass/common/_mixin.scss */
[data-dpr="2"] div {
font-size: 24px;
}
/* line 10, ../../sass/common/_mixin.scss */
[data-dpr="3"] div {
font-size: 36px;
}

  今天就先到这里咯。

    

  

  

Sass初使用的更多相关文章

  1. SASS初体验

    SASS初体验 标签(空格分隔): sass scss css 1. 编译环境 需要安装Ruby,之后需要打开Start Command Prompt with Ruby运行 gem install ...

  2. Sass初入门

    什么是CSS预处理器? CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.   什 ...

  3. 安装Sass的一些注意事项

    文章的内容都来自网络: 1. RubyGems 镜像 2.  compass watch,我们的Sass种如果出现了中文, 就会出现编译错误,我们需要: 找到ruby的安装目录,里面也有sass模块, ...

  4. sass 安装与使用

    1.安装. 安装ruby :http://rubyinstaller.org/downloads 创建项目:在f盘创建一个名为sass的文件夹 ruby命令行:f: ruby命令行:cd sass r ...

  5. Taro开发微信小程序的初体验

    了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...

  6. ionicframework I ------------- 初体验

    ionicframework I -------------  初体验 Create hybrid mobile apps with the web technologies you love. Fr ...

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

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

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

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

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

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

随机推荐

  1. 【深入浅出Linux网络编程】 “实践 -- TCP & UDP”

    通过上一篇博客的学习,你应该对基于epoll的事件触发机制有所掌握,并且通过阅读sio.c/sio.h应该也学会了如何封装epoll以及如何通过设计令epoll更加实用(用户回调,用户参数). 简单回 ...

  2. String,StringBuffer与StringBuilder的区别??

    转自http://blog.csdn.net/rmn190/article/details/1492013 String 字符串常量 StringBuffer 字符串变量(线程安全) StringBu ...

  3. EntityFramework之你不知道的那些事(七)

    前言 前面一系列几乎都是循序渐进式的进行叙述,似乎脚步走得太快了,于是我开始歇一歇去追寻一些我所不太了解的细枝末节,在此过程中也屡次碰壁,但是唯有如此才能更好的成长,不是吗!希望此文对你亦有帮助. 属 ...

  4. 借助node实战WebSocket

    一.WebSocket概述 WebSocket协议,是建立在TCP协议上的,而非HTTP协议. 如下: ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求. 注:w ...

  5. 为SubSonic3.0的查询(SubSonic.Query.Select和存储过程)添加更多的执行功能

    在使用SubSonic3.0的查询功能时,会发现想通过执行返回我们想要的数据,切没有相关的功能,比如说:SubSonic.Query.Select,在使用查询时没有返回DataSet或DataTabl ...

  6. phpstorm 63342默认端口怎么修改

    phpstorm进行网页调试的时候,默认是加端口号63342,在配置本地php环境的时候默认端口不一定是63342这个,更多的是系统默认的端口号80,那么问题就出现了,如何在phpstorm中将633 ...

  7. 关于Java中的static关键字

    Java中的 static 关键字,确实是一个关键的字(key word),今天就来总结一下它的用法,说说为什么关键. Java中的 static 关键字主要是用来做内存管理的.理解了这句话才能够比较 ...

  8. .net基本数据类型操作

    代码编写的过程中,较多的会涉及到基本数据类型的使用和定义,在项目中,对于类型的判定和类型间的相互转换,有时也较为的麻烦,先提供几种基本数据类型的判断方法: 1.判断对象是否为Int32类型的数字: / ...

  9. 汽车之家一道SQL 面试题,大家闲来无事都来敲一敲

    写在前面 上周去汽车之家面试,拿到这个SQL笔试题顿时感觉到有些陌生,因为好长时间不写SQL语句了,当时只写了表设计,示例数据和SQL语句都没写出来. 汽车之家应该用的SQL Server, 编程题一 ...

  10. android获得ImageView图片的等级

    android获得ImageView图片的等级问题 要实现的功能如下图,点击分享能显示选中与不选中状态,然后发送是根据状态来实现具体分享功能. 在gridview中有5个子项,每个子元素都有两张图片A ...