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

相关文章

  • linux安装git,linux安装jenkins

    https://mirrors.edge.kernel.org/pub/software/scm/git/

    windseek
  • vscode调试typescript

    1、记录一个插件:https://www.npmjs.com/package/ts-node

    windseek
  • git恢复到上次提交 4个区5种状态检查修改撤销修改

    转载:https://blog.csdn.net/kangvcar/article/details/78809247

    windseek
  • Nebula Graph 技术总监陈恒:图数据库怎么和深度学习框架进行结合?

    Nebula Graph 的技术总监在 09.24 - 09.30 期间同开源中国·高手问答的小伙伴们以「图数据库的设计和实践」为切入点展开讨论,包括:「图数据...

    NebulaGraph
  • Kafka学习笔记(1)

    Kafka 的悄息通过主题进行分类。主题就好比数据库的表,或者文件系统里的文件夹。主题可以被分为若干个分区, 一个分区就是一个提交日志。消息以追加的方式写入分区...

    董可伦
  • 从暴力枚举用户到获取域所有信息

    我们在进行内网渗透中,会遇到存在 windows 域环境的情况,当我们获得一个内网主机权限之后,这个主机可能没有加入域,我们无法直接通过在这个主机上获取域中的相...

    信安之路
  • 如何备份PostgreSQL数据库

    如果您在生产环境中使用PostgreSQL,请务必采取预防措施以确保用户的数据不会丢失。通过频繁备份数据库或使用cron任务自动执行备份,您将能够在数据库丢失或...

    温浪
  • 提前11秒,AI让神经科学家预知了你的决定

    神经科学家的研究来自一项有14名人类受试者参与的实验,当然,这次的选择不是鸡肉饭和牛肉面,而是:

    量子位
  • 搭建个人国密CA(Certification Authority)

    在SSL/TLS/HTTPS通信中,证书虽然不是TLS/SSL协议的一部分,却是HTTPS非常关键的一环,网站引入证书才能避免中间人攻击。证书涉及了很多密码学知...

    云水木石
  • 预测下英语流利说之后,下一个到纽交所敲钟的教育科技独角兽?

    英语流利说上市了,据统计数据显示,2017年我国K12在校人数统计为1.32亿人,大学本科生有2753.6万人,而英语流利说注册用户为7000万人次,占比接近5...

    mixlab

扫码关注云+社区

领取腾讯云代金券