热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

SASS--安装、用法、编译

一、什么是sass?我们用css都知道,css并不是一门编程语言,于是有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(csspreprocessor)。它的基本思

一、什么是sass?

  我们用css都知道,css并不是一门编程语言,于是有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。

二、sass的安装

  2.1 安装ruby

         sass是用ruby语言写的,所以使用的时候我们需要有ruby的环境。

         在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads )
         在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况)Add Ruby executables to ypur PATH  

  2.2 sass的安装

         有四种安装sass的方式

          2.2.1  命令行安装  在命令行输入以下命令(windows)          

           gem install sass
          2.2.2   通过 Compass 来安装 Sass 

           sudo gem install sass

          2.2.3  本地安装  可以到 Rubygems(http://rubygems.org/) 网站上将 Sass 的安装包(http://rubygems.org/gems/sass)下载下来,然后在命令终端输入:

           gem install <下载的安装包的路径>
          2.2.4  淘宝 RubyGems 镜像安装 Sass  除了下载 Sass 安装包到本地安装之外,碰到网络原因无法安装时还可以使用淘宝 RubyGems 镜像安装 Sass。只是我们需要通过 gem sources 命令来配置源,先移除默认的 https://rubygems.org 源,然后添加淘宝的源 https://ruby.taobao.org:

         第一步:移动默认的源

gem sources --remove https://rubygems.org/

第二步:指定淘宝的源

gem sources -a https://ruby.taobao.org/

第三步:查看指定的源是不是淘宝源

gem sources -l

返回结果如下:

*** CURRENT SOURCES ***
https://ruby.taobao.org

请确保只有 ruby.taobao.org。如果无误之后,执行下面的命令:

gem install sass

我用的第四种方法,很方便^_^

三、sass的编译

         推荐使用Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)很好用,很方便。

         这里它编译后输出格式有四种:

        * nested:嵌套缩进的css代码,它是默认值。

  * expanded:没有缩进的、扩展的css代码。

  * compact:简洁格式的css代码。

  * compressed:压缩后的css代码。

四、sass的用法

        4.1  变量

                sass允许使用变量,所有变量以$开头               

$bg-color:#eee;
body{
background-color:$bg-color;
}
                 变量要嵌入字符串中时,应加上#{}

$a:top;
.box{
border-#{$a}: 1px solid #ccc;
}

         4.2  嵌套

              sass可以实现css的嵌套,更具可读性

.box a{
color:red
}
/*可以写成*/
.box{
a{
color:red;
}
}
              &符号可以代表父选择器

.box a{
color:red;
}
.box a:hover{
color:blue;
}
/*可以写成*/
.box{
a{
color:red;
&:hover{
color:blue;
}
}
}

            4.3  继承

                    使用@extend进行继承

.box1{
border:1px solid #ccc;
}
.box2{
@extend .box1;
background-color:#fff;
}      

           4.4  混合器

                   使用@mixin可以构建一个可以重用的css样式规则,使用@include进行调用

@mixin a-after{
position:absolute;
top:0;
right:-8px;
border:{
left:8px solid $a-bg-color;
top:7px solid transparent;
bottom:8px solid transparent;
}
}
a{
position:relative;
  color:$a-color;
  display:block;
  padding:0 10px;
  background-color:$a-bg-color;
  i{
  @include a-after;
  }
 }
                   这里可以看到属性也可以进行嵌套,border:{left:xxx;}这样子。

                   混合器@mixin的强大之处是它可以指定参数和初始值

@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(blue, red, green);
}
/*编译结果*/
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

               4.5  计算

                    sass可以实现属性值计算,运算符两边要有空格

.box3{
margin: (14px / 2);
    top: 50px + 100px;
    right: $var * 10%;
}
               4.6  导入文件

                   使用@import进行导入,如果导入的是scss文件的话,这个导入的scss文件的名称必须以下划线开头;如果导入的是css文件的话,用法和css中的一致。

               4.7  注释

                   使用/* */或者// 两种方式进行注释,//的注释不会编译到css文件中,称为静默注释, /**/的注释会随之编译到css文件中      

五、小结

        借用sass教程上的话进行小结。

变量是sass提供的最基本的工具。通过变量可以让独立的css值变得可重用,无论是在一条单独的规则范围内还是在整个样式表中。变量、混合器的命名甚至sass的文件名,可以互换通用_-。同样基础的是sass的嵌套机制。嵌套允许css规则内嵌套css规则,减少重复编写常用的选择器,同时让样式表的结构一眼望去更加清晰。sass同时提供了特殊的父选择器标识符&,通过它可以构造出更高效的嵌套。

你也已经学到了sass的另一个重要特性,样式导入。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件,避免了项目中有大量的css文件通过原生的css@import带来的性能问题。通过嵌套导入和默认变量值,导入可以构建更强有力的、可定制的样式。混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。你不仅学到了如何使用混合器减少重复,同时学习到了如何使用混合器让你的css变得更加可维护和语义化。最后,我们学习了与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系,通过这些关系可以保持你的css的整洁和可维护性。

      


             




推荐阅读
  • 本文主要分享【】,技术文章【SassScss、Less是什么?】为【CRMEB】投稿,如果你遇到CRMEB,学习笔记相关问题,本文相关知识或能到你。Sass(SyntacticallyAw ... [详细]
  • CSS制作框架Sass 3.4.4有哪些优点
    这篇文章主要讲解了“CSS制作框架Sass3.4.4有哪些优点”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究 ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
  • 浏览器中的异常检测算法及其在深度学习中的应用
    本文介绍了在浏览器中进行异常检测的算法,包括统计学方法和机器学习方法,并探讨了异常检测在深度学习中的应用。异常检测在金融领域的信用卡欺诈、企业安全领域的非法入侵、IT运维中的设备维护时间点预测等方面具有广泛的应用。通过使用TensorFlow.js进行异常检测,可以实现对单变量和多变量异常的检测。统计学方法通过估计数据的分布概率来计算数据点的异常概率,而机器学习方法则通过训练数据来建立异常检测模型。 ... [详细]
  • Week04面向对象设计与继承学习总结及作业要求
    本文总结了Week04面向对象设计与继承的重要知识点,包括对象、类、封装性、静态属性、静态方法、重载、继承和多态等。同时,还介绍了私有构造函数在类外部无法被调用、static不能访问非静态属性以及该类实例可以共享类里的static属性等内容。此外,还提到了作业要求,包括讲述一个在网上商城购物或在班级博客进行学习的故事,并使用Markdown的加粗标记和语句块标记标注关键名词和动词。最后,还提到了参考资料中关于UML类图如何绘制的范例。 ... [详细]
  • 前提条件:经典的基于堆栈的缓冲区溢出虚拟机安装:Ubuntu12.04(x86)在以前的帖子中,我们看到了攻击者需要知道下面两样事情堆栈地 ... [详细]
  • ruby环境中自动编译sass教程
    ruby环境中自动编译sass教程-sass为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护!sass安装安装完ruby之后,在开始菜单中,找到 ... [详细]
  • 我在SCSS中为网格列(12列)提供了一个@for函数。我的SASS功能:@for$ifrom1through12 ... [详细]
  • 【BZOJ3197】[Sdoi2013]assassinDescriptionInputOutputSampleInput412233400111000SampleOutput ... [详细]
  • CSSandSass(SCSS)stylerulesIDandclassnamingID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和 ... [详细]
  • 1.什么是预处理器?  CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。 ... [详细]
  • 部分转载自:http:blog.csdn.netliujiuxiaoshitouarticledetails69920917头文件#include<assert.h& ... [详细]
  • 关于mysql原理与web系统开发的信息
    本文目录一览:1、在做web开发的时候,MySQL主要功能是什么? ... [详细]
  • Windows 11 Insider Preview Build 22621.730/22623.730(KB5017385)发布!
    今天微软官方将Windows11InsiderPreviewBuild22621.730和Build22623.730(KB5017385)发布到Bet ... [详细]
author-avatar
in冷霜天
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有