学习笔记:SASS
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位的
安装过程中请注意勾选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的更多相关文章
- 学习笔记 - Sass的安装与使用手册
最近因为工作需要,自学了Sass.现在将学习笔记整理在这里,供大家参考. 1. Sass的安装 Sass的编辑器安装方法有很多,大致能分为两种:应用程序(application)和命令行界面(comm ...
- sass学习笔记 -- sass的四种编译方法
sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
- sass个人学习笔记
Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...
- Sass简单、快速上手_Sass快速入门学习笔记总结
Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...
- gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
- JavaScript学习笔记:数组reduce()和reduceRight()方法
很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...
- stylus入门学习笔记
title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...
- Angular6 学习笔记——组件详解之组件通讯
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
随机推荐
- 原生js小球运动
//html代码 <input type="button" value="小球运动" /> <div></div> //js ...
- Alpha冲刺10
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10045588.html 作业博客:https://edu.cnblogs.com/campus ...
- React Native Android打包apk
按照官方的5步曲: 1.在终端里面,cd 到项目的根目录后.执行下面这行命令: keytool -genkey -v -keystore my-release-key.keystore -alias ...
- 机器视觉:SSD Single Shot MultiBox Detector
今天介绍目标检测中非常著名的一个框架 SSD,与之前的 R-CNN 系列的不同,而且速度比 YOLO 更快. SSD 的核心思想是将不同尺度的 feature map 分成很多固定大小的 box,然后 ...
- 【leetcode】412. Fizz Buzz
problem 412. Fizz Buzz solution: class Solution { public: vector<string> fizzBuzz(int n) { vec ...
- mission 01
A.自己目前在专业能力上的短板,及打算如何弥补. answer:由于在课本中所学的知识是死板的,加上不知如何课外提高自己在专业上的实践应用能力,所以我认为我在专业能力上的短板是缺乏将所掌握的知识应用到 ...
- 着色器语言 GLSL (opengl-shader-language)入门大全
基本类型: 类型 说明 void 空类型,即不返回任何值 bool 布尔类型 true,false int 带符号的整数 signed integer float 带符号的浮点数 floating s ...
- vue安装过程
我们3个安装参考的博客地址 http://blog.qianduanchina.cn/post/596c5bb27838a71273eb4da3 http://blog.csdn.net/unamat ...
- ESP8266EX资料
https://github.com/esp8266/Arduino http://espressif.com/zh-hans/support/explore/faq 电路资料图如下: 介绍功能: 参 ...
- error: invalid use of void expression
void*类型定义的指针变量只可以接收对象的地址,而没有对象类型这个概念.所以void*指针变量是不能直接用“*指针变量”去访问,需要强制类型转换后才能“间接”访问: *(type*)指针变量,必须给 ...