Sublime2 + SASS + Koala 测试
Sublime SASS语法高亮插件下载地址:https://github.com/kuroir/SCSS.tmbundle/zipball/SublimeText2
koala_2.0.4_setup.exe 下载地址:http://pan.baidu.com/s/1o6ktn5o
测试代码(参考阮一峰:http://www.ruanyifeng.com/blog/2012/06/sass.html)
scss.scss
/*
koala 编译scss不支持中文解决方案:
your disk:\Koala\rubygems\gems\sass-3.4.9\lib\sass
修改 engine.rb 文件
在require 最下面 加入以下代码 即可解决
Encoding.default_external = Encoding.find('utf-8')
*/ /* 导入外部scss文件 */
@import "base.scss"; /* 1.定义普通变量 */
/* 1.1 变量用作css的值*/
$blue : #1875e7;
div {
color : $blue;
} /* 1.2 变量用在css的属性名中 */
$side: left;
div {
border-#{$side}: 1px solid #ccc;
} /* 2.嵌套 */
/* 2.1 普通嵌套 */
#main {
font-size: 14px;
#nav {
font-size: 20px;
color:red;
}
.sidebar {
width: 200px;
border: 20px solid #ccc;
border-radius: 50%;
}
} /* 属性嵌套 */
#warpper{
border: {
color: $blue;
size: 1px;
#{$side}: 10px;
}
} /* 继承 */
#father {
font-size: 20px;
} #child {
@extend #father;
color:red;
} /* 重用的代码块 */
@mixin test($color:red){
color:$color;
} @mixin borderRadius($radius:5px){
border-radius: $radius;
-moz-border-radius:$radius;
-webkit-border-radius: $radius;
} #footer {
@include test(blue);
@include borderRadius(50%);
} /* 高级 */
$color: red;
p{
@if $color == red {
color: blue;
}
} /* for 循环 */
@for $i from 1 to 10{
.line-#{$i}{
border:#{$i}px #ccc solid;
}
} /* while循环 */
$i: 4;
@while $i > 0{
.line#{$i} {font-size: 4px * $i;}
$i: $i - 1; /* 注意变量前后的加空格 */
} /* each */
@each $item in top,left,bottom,right {
.#{$item} {background: url(image/#{$item}.png);}
}
base.scss
$globalfont-size:12px;
body{
font-size: $globalfont-size;
}
输出结果:
@charset "UTF-8";
/*
koala 编译scss不支持中文解决方案:
your disk:\Koala\rubygems\gems\sass-3.4.9\lib\sass
修改 engine.rb 文件
在require 最下面 加入以下代码 即可解决
Encoding.default_external = Encoding.find('utf-8')
*/
/* 导入外部scss文件 */
body {
font-size: 12px;
} /* 1.定义普通变量 */
/* 1.1 变量用作css的值*/
div {
color: #1875e7;
} /* 1.2 变量用在css的属性名中 */
div {
border-left: 1px solid #ccc;
} /* 2.嵌套 */
/* 2.1 普通嵌套 */
#main {
font-size: 14px;
}
#main #nav {
font-size: 20px;
color: red;
}
#main .sidebar {
width: 200px;
border: 20px solid #ccc;
border-radius: 50%;
} /* 属性嵌套 */
#warpper {
border-color: #1875e7;
border-size: 1px;
border-left: 10px;
} /* 继承 */
#father, #child {
font-size: 20px;
} #child {
color: red;
} /* 重用的代码块 */
#footer {
color: blue;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
} /* 高级 */
p {
color: blue;
} /* for 循环 */
.line-1 {
border: 1px #ccc solid;
} .line-2 {
border: 2px #ccc solid;
} .line-3 {
border: 3px #ccc solid;
} .line-4 {
border: 4px #ccc solid;
} .line-5 {
border: 5px #ccc solid;
} .line-6 {
border: 6px #ccc solid;
} .line-7 {
border: 7px #ccc solid;
} .line-8 {
border: 8px #ccc solid;
} .line-9 {
border: 9px #ccc solid;
} /* while循环 */
.line4 {
font-size: 16px;
} /* 注意变量前后的加空格 */
.line3 {
font-size: 12px;
} /* 注意变量前后的加空格 */
.line2 {
font-size: 8px;
} /* 注意变量前后的加空格 */
.line1 {
font-size: 4px;
} /* 注意变量前后的加空格 */
/* each */
.top {
background: url(image/top.png);
} .left {
background: url(image/left.png);
} .bottom {
background: url(image/bottom.png);
} .right {
background: url(image/right.png);
} /*# sourceMappingURL=scss.css.map */
Sublime2 + SASS + Koala 测试的更多相关文章
- PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...
- Ruby与sass 与compass安装
Ruby安装 windows平台下使用Rubyinstaller安装 1) 下载Rubyinstaller 2) 安装Rubyinstaller 记得勾选 add ruby executables ...
- sass 的使用
普通变量 ? 1 $fontSize:12px; 默认变量 ? 1 $fontSize:12px; !default; 变量覆盖:只需要在默认变量之前重新声明下变量即可 ? 1 2 $fontSize ...
- Sass中连体符(&)的运用
在CSS中,这种想法是无法实现的,但在Sass中,可以轻松的通过连体符&来实现.这也是我们今天要说的. 我们先来回忆一下,CSS中常见的一组样式: /*页面中链接的颜色*/ a {clolor ...
- css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了.但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程, ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- Sass:初识Sass与Koala工具的使用
一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...
- Less/Sass编译工具,koala使用指南
如果你正在使用sass.less或coffee,而没有注意到koala, 那说明你可能已经好久没有更新你的知识库了.koala这个由国人编写的,用于编译sass.less.coffee利器,在最近的短 ...
- Sass、Less编译器koala及koala不支持中文字体的解决方法
一款很好用的Sass编译器,还可以编译Less.coffeescript等 去官网下载适合自己电脑的版本 http://koala-app.com/index-zh.html 打开后拖动或者打开项目目 ...
随机推荐
- java设计模式学习 ----- 工厂方法模式(Factory Method)
工厂方法模式(Factory Method) 工厂方法模式分为三种:普通工厂模式.多个工厂方法模式.静态工厂方法模式 普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建. 关系图 ...
- time 和 datetime 模块
在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“type(time.time( ...
- Nginx日志格式以及相关配置
一.Nginx日志格式以及参数说明log_format main '$remote_addr - $remote_user [$time_local] "$request" ' ...
- solr-6.4.2安装+分词器配置
一.solr安装 solr下载地址:http://archive.apache.org/dist/lucene/solr/6.4.2/ 1.解压solr软件包:tar xf solr-6.4.2.tg ...
- iOS开发之计算器
本项目基于swift3.0的语法. // // ViewController.swift // 加法计算器 // // Created by 葛杨杨 on 2017/7/25. // Copyrigh ...
- phoneGap实现离线缓存
引自:http://www.iteye.com/topic/1128173 正在做一个跨平台的应用,需要使用phonegap进行文件的一些基本操作. 需求如下:可以选择本地图片,或者从相机选择图片,并 ...
- gearman管理
通常,Gearman被用来分发任务,以便实现异步操作.下面捋捋如何管理Gearman. 说明:请自行安装好Gearman和PHP PECL Gearman. (我之前安装的gearman php的c语 ...
- python3 多线程编程
python / 并发 / 线程 / 对象 / 编程 0.什么是线程 1. 多线程模块 2. 创建线程的方法 3. join()方法 4.isAlive()方法 5. name属性和daemon属 ...
- 设计模式之单例模式--instance
<?php header('Content-Type:text/html;charest=utf-8'); /** * 设计模式之单例模式 * $_instance必须声明为静态的私有变量 * ...
- 浅谈HTTPS协议
前言 理解协议是做接口测试的前提.本文主要向大家展示博主对HTTPS协议的理解,网上有诸多资料,有些写得过于晦涩难懂,尤其是需要密码学的一些知识.我做了一下简单的整理,刨除复杂的底层实现,单从理解SS ...