sass或scss入门
1、sass环境搭载:
安装ruby
安装sass
安装compass
配置webstorm
如果只是使用sass的话,就配置sass命名监听就好了
如图:
sass目录如下:
如果配置了compass要监听compass命令,如图:
compass目录如下:
2、基本语法:
@import "compass/css3";
@import "compass/layout";
@import "compass/typography";
@import "compass/utilities";
@import "compass";
.round{
@include border-radius(15px);
@include opacity(0.6);
@include inline-block;
@include sticky-footer(54px);
@include stretch;
}
a{
@include link-colors(#00c,#0cc,#c0c,#ccc,#cc0);
}
.clearfix{
@include clearfix;
}
table{
@include table-scaffolding;
}
.icon{
background:inline_image("grid.png");
}
#main {
width: 97%; p, div {
font-size: 2em;
a { font-weight: bold; }
}
p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000; }
}
pre { font-size: 3em; }
}
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
color:#123456;
}
}
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
编译之后:
/* line 6, ../sass/test.scss */
.round {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.6;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom:;
*display: inline;
position: absolute;
top:;
bottom:;
left:;
right:;
}
/* line 10, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
.round html, .round body {
height: 100%;
}
/* line 12, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
.round #root {
clear: both;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -54px;
}
/* line 18, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
.round #root #root_footer {
height: 54px;
}
/* line 20, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
.round #footer {
clear: both;
position: relative;
height: 54px;
} /* line 13, ../sass/test.scss */
a {
color: #00c;
}
/* line 18, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss */
a:visited {
color: #ccc;
}
/* line 21, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss */
a:focus {
color: #cc0;
}
/* line 24, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss */
a:hover {
color: #0cc;
}
/* line 27, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss */
a:active {
color: #c0c;
} /* line 16, ../sass/test.scss */
.clearfix {
overflow: hidden;
*zoom:;
} /* line 2, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/tables/_scaffolding.scss */
table th {
text-align: center;
font-weight: bold;
}
/* line 5, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/tables/_scaffolding.scss */
table td,
table th {
padding: 2px;
}
/* line 8, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/tables/_scaffolding.scss */
table td.numeric,
table th.numeric {
text-align: right;
} /* line 22, ../sass/test.scss */
.icon {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAASCAYAAAApH5ymAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAABISURBVEiJY3zx/vd/hgEA4gIsRKljorE7KAajDqQUjDqQUjDqQErBqAMpBaMOpBSMOpBSMOpASsGgdyAL4693A2Lxq1fEqQMATrMH3/OsPu4AAAAASUVORK5CYII=');
} /* line 25, ../sass/test.scss */
#main {
width: 97%;
}
/* line 28, ../sass/test.scss */
#main p, #main div {
font-size: 2em;
}
/* line 30, ../sass/test.scss */
#main p a, #main div a {
font-weight: bold;
}
/* line 32, ../sass/test.scss */
#main p {
color: #00ff00;
width: 97%;
}
/* line 35, ../sass/test.scss */
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
/* line 39, ../sass/test.scss */
#main pre {
font-size: 3em;
} /* line 41, ../sass/test.scss */
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
font-color: #123456;
} /* line 49, ../sass/test.scss */
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em;
}
重点是五个模块
@import "compass/css3";
@import "compass/layout";
@import "compass/typography";
@import "compass/utilities";
@import "compass";
宏定义:@include
继承虚拟类:
@extend %
sass或scss入门的更多相关文章
- Sass介绍及入门教程
Sass是什么? Sass是"Syntactically Awesome StyleSheets"的简称.那么他是什么?其实没有必要太过于纠结,只要知道他是“CSS预处理器”中的一 ...
- scss 入门
scss 入门 1. scss 引入其他文件 引入其他 .scss 文件 @import 'index.scss' 这样的话,文件在编译后,会自动把引入的文件和当前文件合并为一个. scss 文件 引 ...
- scss 入门基础
在一个项目中,样式是必不可少的一部分,而对于一个完整的项目来说是有个基准色调的.在项目需求变化不大的情况下,可以直接在css中写这些颜色值之类的东西.但是如果遇到一个朝令夕改的领导或者甲方,那会变得相 ...
- scss入门学习(一)
sass的文件后缀名 sass是目前流行的css预处理语言.sass有两种后缀文件,一种是.sass,不允许使用大括号和分号:另一种是.SCSS,允许使用大括号和分号,类似于我们平时写css的语法习惯 ...
- Sass和Compass入门
一.前言 1.Sass是什么? Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者 ...
- 【已解决】React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...
- sass和scss的区别
页面引入的时候还是引入的css文件 因为sass和scss都是一种css的预处理工具 目的最后都是生成css文件 sass不带{}和:是基于Ruby 写出来的,严格的缩进方式来控制 scss带这两个 ...
- 1-1 sacc(scss)入门
定义: CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗的说,“ ...
- sass和scss相关知识
参考地址:http://www.imooc.com/learn/311 什么是css预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性 ...
随机推荐
- ssh无法远程登陆别的机器
ssh无法远程登陆别的机器,提示报错: ssh: symbol lookup error: ssh: undefined symbol: EVP_aes_128_ctr 解决方法如下: 给相应配置文件 ...
- matlab 逻辑数组及其应用
这几天学习了matlab的逻辑数组功能,总的感觉就有两点: 第一,通过对原来的数组a进行逻辑判断后得到逻辑数组b 第二,逻辑数组进行某种运算符操作又回到原数组类型 第三,利用逻辑数组mask功能 测试 ...
- app集成微信支付服务端代码-php版本
1.微信支付分为两种,一种是微信公众品台的微信支付,另一种是微信开放平台的微信支付 2.上周做的是开放品台的微信支付,把遇到的问题总结一下 第一,下载官方提供的代码,解压后放到根目录下,然后认真读文档 ...
- checkinstall包的使用
1. Checkinstall是个很有用的工具.当软件编译过后,Checkinstall能够帮助安装. 下面的命令是安装软件 ./configure make make install 但是用这种安装 ...
- toupper函数及一些小程序
toupper 原型:extern int toupper(int c); 用法:#include <ctype.h> 功能:将字符c转换为大写英文字母 说明:如果c为小写英文字母,则返回 ...
- linux oracle 10g 安装时 .bash_profile的设置
export ORACLE_BASE=/home/oracle/oracle10g export ORACLE_SID=ccpbs export ORACLE_HOME=$ORACLE_BASE/pr ...
- SQL中的join连接查询
inner join(交集 ,自然连接, 简写成join) 是最普通的连接查询,相当于早期根据where条件连接的查询 outer join(并集或部分并集,左表 + 右表) le ...
- Javascript继承(暂略去中转函数、组合继承和寄生继承)
继承,在JS中通过原型链实现.如: function Box(){ this.name="Lee"; } function Desk(){ this.age=100; } //通过 ...
- 【2017年新篇章】 .NET 面试题汇总(二)
本次给大家介绍的是我收集以及自己个人保存一些.NET面试题第二篇 第一篇文章请到这里:[2017年新篇章] .NET 面试题汇总(一) 简介 此次包含的不止是.NET知识,也包含少许前端知识以及.ne ...
- MyBatis 源码分析——类型处理器
官网上面讲到:无论是 MyBatis 在预处理语句(PreparedStatement)中设置一个参数时,还是从结果集中取出一个值时, 都会用类型处理器将获取的值以合适的方式转换成 Java 类型.那 ...