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 条评论
登录 后参与评论

相关文章

来自专栏李蔚蓬的专栏

关于TensorFlow的安装和心得

随后在cmd处通过import tensorflow,查看本机的CUDA以及cuDNN的适机版本:

1003
来自专栏Objective-C

iOS-UINavigationBar 设置背景图片

3405
来自专栏xx_Cc的学习总结专栏

iOS中用application 来管理电池栏状态

1967
来自专栏运维小白

19.10 处理图形中的乱码

处理图形中的乱码 设置为中文后,zabbix图形的中文文字会显示小方框 这是因为在zabbix的字体库中没有中文字体,需要从windows上借用一个过来 vim...

18111
来自专栏章鱼的慢慢技术路

在Unity场景中更改天空盒的步骤

1446
来自专栏韩东吉的Unity杂货铺

零基础入门 16: UGUI RawImage

今天的内容会很简单,也会很短,分享一下UGUI的RawImage,那什么是RawImage呢?

542
来自专栏跟着阿笨一起玩NET

winform 在指定目录下已经生成资源Image图片的方式

假设在项目目录下存在一个Image目录,注意其中图片已经都设置成为:生成方式为资源文件。

742
来自专栏calvin

xamarin.forms新建项目android编译错误

vs2015 update3 新建的xamarin.forms项目中的android项目编译错误。提示缺少android_m2repository_r22.zi...

902
来自专栏技术博客

Win8 连连看小程序

看到win8和VS2012都发布有些日子,心里也痒痒的,于是就学习了几天关于在VS2012下开发,当然主要是开发应用商店小程序。学习期间一直参考:

692
来自专栏计算机视觉战队

NVIDIA DIGITS(非常好用的一个框架)

我也忘了在哪里看过几篇类似的文章,为了让更多朋友知道这个好工具,我今天也作为一名合格的搬运工,希望大家努力传播正能量,和大家共同进步!谢谢! NVIDIA为...

3715

扫码关注云+社区