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: 1;
  *display: inline;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* 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: 1;
}

/* 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 %

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

HTTP协议漫谈

简介 园子里已经有不少介绍HTTP的的好文章。对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将H...

33713
来自专栏云计算教程系列

如何使用Ubuntu 16.04的Django一键安装镜像

Django是一个用于快速开发Web应用程序的高级Python框架。Django一键安装程序通过Django,Nginx,Gunicorn和Postgres为您...

1575
来自专栏Java学习网

Linux 守护进程的启动方法

Linux 守护进程的启动方法 “守护进程”(daemon)就是一直在后台运行的进程(daemon)。 本文介绍如何将一个 Web 应用,启动为守护进程。 ? ...

3217
来自专栏草根专栏

使用VS Code开发asp.net core (下)

本文是基于Windows10的. Debugging javascript 打开wwwroot/js/site.js, 写一段简单的js代码: (functio...

3205
来自专栏androidBlog

Git config 使用说明

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

1000
来自专栏移动开发之家

快速将Android项目发布的JCenter

demo https://github.com/CarGuo/PublishToJcenter

922
来自专栏阮一峰的网络日志

Linux 守护进程的启动方法

"守护进程"(daemon)就是一直在后台运行的进程(daemon)。 本文介绍如何将一个 Web 应用,启动为守护进程。 ? 一、问题的由来 Web应用写好后...

2815
来自专栏蓝天

nohup、&、setsid、fork和fg、bg究竟有啥区别?

在后台运行的进程不一定是守护进程!一个进程要成为守护进程,必须做到以下两点:

912
来自专栏用户2442861的专栏

Maven介绍,包括作用、核心概念、用法、常用命令、扩展及配置

两年半前写的关于Maven的介绍,现在看来都还是不错的,自己转下。写博客的一大好处就是方便自己以后查阅,自己总结的总是最靠谱的。

1101
来自专栏cloudskyme

三步学会用spring开发OSGI——(第三步:web篇)

接下来就是我们要创建的web工程了,为了简单,我们直接利用virgo所带的模板来新建工程,控制层使用的是spring mvc 3。 创建web工程 打开STS,...

3369

扫码关注云+社区