SASS:

http://www.sass.hk/sass-course.html   SASS  2015-10-10

http://sass.bootcss.com/docs/sass-reference/   Sass参考手册  2015-10-11

http://www.ruanyifeng.com/blog/2012/06/sass.html   阮一峰的SASS用法指南

sass文件后缀:1.scss

@charset "UTF-8";//这一句一定要写,否则utf8编码的文件,如果包含中文的,编译会出错
@mixin radius5 {//圆角
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.note1 {
background-color: green;
@include radius5;
}

cmd输入命令:sass 1.scss 1.css,编译结果如下:

.note1 {
background-color: green;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; } /*# sourceMappingURL=1.css.map */

Sass的安装:

http://rubyinstaller.org/downloads   官网下载  http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-2.2.3-x64.exe  64位的

https://ruby.taobao.org/  

安装过程中请注意勾选Add Ruby executables to your PATH

ruby -v
gem sources --remove https://rubygems.org/ //1.删除原gem源
gem sources -a https://ruby.taobao.org/ //2.添加国内淘宝源
gem sources -l //3.打印是否替换成功 //安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass sass -v
compass -v gem update sass //更新sass
sass -v //查看sass版本
sass -h //查看sass帮助

....

学习笔记:SASS的更多相关文章

  1. 学习笔记 - Sass的安装与使用手册

    最近因为工作需要,自学了Sass.现在将学习笔记整理在这里,供大家参考. 1. Sass的安装 Sass的编辑器安装方法有很多,大致能分为两种:应用程序(application)和命令行界面(comm ...

  2. sass学习笔记 -- sass的四种编译方法

    sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...

  3. Sass学习笔记之入门篇

    Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...

  4. Sass学习笔记(补充)

    阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...

  5. sass个人学习笔记

    Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...

  6. Sass简单、快速上手_Sass快速入门学习笔记总结

    Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...

  7. gulp学习笔记3

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...

  8. JavaScript学习笔记:数组reduce()和reduceRight()方法

    很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...

  9. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

  10. Angular6 学习笔记——组件详解之组件通讯

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

随机推荐

  1. 原生js小球运动

    //html代码 <input type="button" value="小球运动" /> <div></div> //js ...

  2. Alpha冲刺10

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10045588.html 作业博客:https://edu.cnblogs.com/campus ...

  3. React Native Android打包apk

    按照官方的5步曲: 1.在终端里面,cd 到项目的根目录后.执行下面这行命令: keytool -genkey -v -keystore my-release-key.keystore -alias ...

  4. 机器视觉:SSD Single Shot MultiBox Detector

    今天介绍目标检测中非常著名的一个框架 SSD,与之前的 R-CNN 系列的不同,而且速度比 YOLO 更快. SSD 的核心思想是将不同尺度的 feature map 分成很多固定大小的 box,然后 ...

  5. 【leetcode】412. Fizz Buzz

    problem 412. Fizz Buzz solution: class Solution { public: vector<string> fizzBuzz(int n) { vec ...

  6. mission 01

    A.自己目前在专业能力上的短板,及打算如何弥补. answer:由于在课本中所学的知识是死板的,加上不知如何课外提高自己在专业上的实践应用能力,所以我认为我在专业能力上的短板是缺乏将所掌握的知识应用到 ...

  7. 着色器语言 GLSL (opengl-shader-language)入门大全

    基本类型: 类型 说明 void 空类型,即不返回任何值 bool 布尔类型 true,false int 带符号的整数 signed integer float 带符号的浮点数 floating s ...

  8. vue安装过程

    我们3个安装参考的博客地址 http://blog.qianduanchina.cn/post/596c5bb27838a71273eb4da3 http://blog.csdn.net/unamat ...

  9. ESP8266EX资料

    https://github.com/esp8266/Arduino http://espressif.com/zh-hans/support/explore/faq 电路资料图如下: 介绍功能: 参 ...

  10. error: invalid use of void expression

    void*类型定义的指针变量只可以接收对象的地址,而没有对象类型这个概念.所以void*指针变量是不能直接用“*指针变量”去访问,需要强制类型转换后才能“间接”访问: *(type*)指针变量,必须给 ...