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

sass学习笔记1-3

保持sass条理性和可读性的最基本的三个方法:嵌套、导入和注释安装sass和compassruby-v查看ruby版本gemsources—removehttps:rubyg

保持sass条理性和可读性的最基本的三个方法:嵌套、导入和注释

安装sass和compass

ruby -v查看ruby版本
gem sources —remove https://rubygems.org/删除原gem
gem sources -a https://ruby.taobao.org/ 添加国内淘宝源
gem sources -l 打印是否替换成功

gem install sass

gem install compass(安装sass和compass 可能要权限,sudo)

sass -v

compass -v查看安装后的版本

gem update sass 更新sass
sass -h 查看sass帮助

编译sass:
在命令行编译 Sass:

sass input.scss output.css

监视单个 Sass 文件,每次修改并保存时自动编译:

sass --watch input.scss:output.css

监视整个文件夹:

sass --watch app/sass:public/stylesheets

开发工具编译sass:
webstrom配置sass,自动编译:
preference-tools-file watchers(为sass,scss添加监听)
完了之后new file,stylesheet(再选择文件类型为scss),不要直接new scss会新建不出来,这是写的scss就自动编译为css了。

1、使用变量;

$ 用来标识变量

1-1变量声明

$nav-color:#F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}

div{
color: $nav-color;
}

$nav-color 是一个变量,在规则块的外部,所以在nav和div里面都可以使用,$width: 100px;在nav规则块的内部,就只能在nav块内使用)

//编译后

nav {
width: 100px;
color: #F90;
}

div{
color: #F90;
}

2. 嵌套CSS 规则;

#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}

/* 编译后 */

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

这个过程中,sass用了两步,首先,把#content(父级)这个id放到article选择器(子级)和aside选择器(子级)的前边:然后,#content article里边还有嵌套的规则,sass重复一遍上边的步骤,把新的选择器添加到内嵌的选择器前边。

#content {
background-color: #f5f5f5;
aside { background-color: #eee }
}

容器元素的样式规则会被单独抽离出来,而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。

#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

大多数情况下这种简单的嵌套都没问题,但是有些场景下不行,比如你想要在嵌套的选择器 里边立刻应用一个类似于:hover的伪类。为了解决这种以及其他情况,sass提供了一个特殊结构&。

2-1. 父选择器的标识符&;

在使用嵌套规则时,父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号,且可以放在任何一个选择器可出现的地方,比如h1放在哪,它就可以放在哪。

article a {
color: blue;
&:hover { color: red }
}

编译后

article a { color: blue }
article a:hover { color: red }

同时父选择器标识符还有另外一种用法,你可以在父选择器之前添加选择器。举例来说,当用户在使用IE浏览器时,你会通过Javascript在标签上添加一个ie的类名,为这种情况编写特殊的样式如下:

#content aside {
color: red;
body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

2-2. 群组选择器的嵌套;

群组选择器 的规则会对命中群组中任何一个选择器的元素生效。

.container {
h1, h2, h3 {margin-bottom: .8em}
}

编译后

.container h1, .container h2, .container h3 { margin-bottom: .8em }

2-3. 子组合选择器和同层组合选择器:>、+和~;

article > section { border: 1px solid #ccc }
header + p { font-size: 1.1em } //同层相邻组合选择器+选择header元素后紧跟的p元素:
article ~ article { border-top: 1px dashed #ccc } //选择所有跟在article后的同层article元素,不管它们之间隔了多少其他元素:

在sass中可以把它们放在外层选择器后边,或里层选择器前边:

article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}

编译后

article ~ article { border-top: 1px dashed #ccc }
article > section { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

2-4. 嵌套属性;

nav {
border: {
style: solid
;
width: 1px;
color: #ccc;
}

}

嵌套属性的规则:把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中。就像css选择器嵌套一样,sass会把你的子属性一一解开,把根属性和子属性部分通过中划线-连接起来,最后生成的效果与你手动一遍遍写的css样式一样:

nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}

对于属性的缩写形式,你甚至可以像下边这样来嵌套,指明例外规则:

nav {
border: 1px solid #ccc {
left: 0px
;
right: 0px;
}

}

这比下边这种同等样式的写法要好:

nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}

3. 导入SASS文件;

使用sass的@import来处理多个sass文件。
集中导入sass文件的方法,使你的样式可重用性更高,包括声明可自定义的变量值,以及在某一个选择器范围内导入sass文件。
如何在sass中使用css原生的@import命令。
有些sass文件用于导入,你并不希望为每个这样的文件单独地生成一个css文件。对此,sass用一个特殊的约定来解决。

css:@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。
sass:sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。另外,1、所有在被导入文件中定义的变量和混合器(参见2.5节)均可在导入文件中使用。2、使用sass的@import规则并不需要指明被导入文件的全名。可以省略.sass或.scss文件后缀。在不修改样式表的前提下,完全可以随意修改你或别人写的被导入的sass样式文件语法,在sass和scss语法之间随意切换。
举例,@import”sidebar”;这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。

3-1 使用SASS部分文件;

当通过@import把sass样式分散到多个文件时,你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。对此,sass有一个特殊的约定来命名这些文件。
sass局部文件的文件名以下划线开头。

sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。举例来说,你想导入themes/_night-sky.scss这个局部文件里的变量,只需在样式表中写@import “themes/night-sky”;。
局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时,这非常有用。在这种情况下,有时需要在你的样式表中对导入的样式稍作修改,sass有一个功能刚好可以解决这个问题,即默认变量值。

3-2. 默认变量值;

一般情况下,反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。

$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

在上边的例子中,超链接的color会被设置为red。这可能并不是你想要的结果,假如你写了一个可被他人通过@import导入的sass库文件,你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面,不同的是!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

在上例中,如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量,那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明,则$fancybox-width将默认为400px。

3-3. 嵌套导入;

(允许只在某一个选择器的范围内导入sass局部文件。)
跟原生的css不同,sass允许@import命令写在css规则内。这种导入方式下,生成对应的css文件时,局部文件会被直接插入到css规则内导入它的地方。举例说明,有一个名为_blue-theme.scss的局部文件,内容如下:

aside {
background: blue;
color: white;
}

然后把它导入到一个CSS规则内,如下所示:

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
aside {
background: blue;
color: #fff;
}
}

被导入的局部文件中定义的所有变量和混合器,也会在这个规则范围内生效。这些变量和混合器不会全局有效,这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。
有时,可用css原生的@import机制,在浏览器中下载必需的css文件。sass也提供了几种方法来达成这种需求。

3-4


推荐阅读
  • 构建Java自定义持久层框架:实现数据访问与存储的高效解决方案
    JDBC连接数据库步骤:Connection连接对象,PreparedStatement ... [详细]
  • 问题场景用Java进行web开发过程当中,当遇到很多很多个字段的实体时,最苦恼的莫过于编辑字段的查看和修改界面,发现2个页面存在很多重复信息,能不能写一遍?有没有轮子用都不如自己造。解决方式笔者根据自 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 本文深入探讨了ASP.NET中ViewState、Cookie和Session三种状态管理技术的区别与应用场景。ViewState主要用于保存页面控件的状态信息,确保在多次往返服务器过程中数据的一致性;Cookie则存储在客户端,适用于保存少量用户偏好设置等非敏感信息;而Session则在服务器端存储数据,适合处理需要跨页面保持的数据。文章详细分析了这三种技术的工作原理及其优缺点,并提供了实际应用中的最佳实践建议。 ... [详细]
  • 进程(Process)是指计算机中程序对特定数据集的一次运行活动,是系统资源分配与调度的核心单元,构成了操作系统架构的基础。在早期以进程为中心的计算机体系结构中,进程被视为程序的执行实例,其状态和控制信息通过任务描述符(task_struct)进行管理和维护。本文将深入探讨进程的概念及其关键数据结构task_struct,解析其在操作系统中的作用和实现机制。 ... [详细]
  • 深入解析Spring框架中的双亲委派机制突破方法
    在探讨Spring框架中突破双亲委派机制的方法之前,首先需要了解类加载器的基本概念。类加载器负责将类的全限定名转换为对应的二进制字节流。每个类在被特定的类加载器加载后,其唯一性得到保证。然而,这种机制在某些场景下可能会限制灵活性,因此Spring框架提供了一些策略来突破这一限制,以实现更加动态和灵活的类加载。这些策略不仅能够提升系统的可扩展性,还能在复杂的运行环境中确保类的正确加载和管理。 ... [详细]
  • 在CSS中为文本框添加黑色边框是一个简单而有效的方法,可以显著提升网页元素的视觉效果。本文将详细介绍如何通过CSS代码轻松实现这一目标,包括设置边框宽度、样式和颜色的具体步骤,帮助开发者快速掌握这一技巧。 ... [详细]
  • 我正在docker本地运行coo ... [详细]
  • 在ReactWeb应用程序的上下文中,cssscsssass中有哪些功能是使用纯JavaScript ... [详细]
  • 在Effective Java第三版中,建议在方法返回类型中优先考虑使用Collection而非Stream,以提高代码的灵活性和兼容性。 ... [详细]
  • JavaScript 实现图片文件转Base64编码的方法
    本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串,适用于Web前端开发中图片上传前的预处理。 ... [详细]
  • 在Java开发中,保护代码安全是一个重要的课题。由于Java字节码容易被反编译,因此使用代码混淆工具如ProGuard变得尤为重要。本文将详细介绍如何使用ProGuard进行代码混淆,以及其基本原理和常见问题。 ... [详细]
  • 如何使用和示例代码解析 org.semanticweb.owlapi.model.OWLSubPropertyChainOfAxiom.getPropertyChain() 方法 ... [详细]
  • 为了向用户提供虚拟应用程序,通常会在基础架构中部署StoreFront或Web Interface。为了确保安全的远程访问,通常需要在DMZ中配置Secure Gateway或Access Gateway。本文详细对比了这两种界面工具的功能特性,包括用户管理、安全性、性能优化等方面,为企业选择合适的解决方案提供了全面的参考。 ... [详细]
  • Linux磁盘管理入门指南:MBR分区格式详解与安装步骤
    在 CentOS 7.x 环境下,本文详细介绍了 MBR 分区格式的基本概念及其安装步骤。实验中使用了 SAS 和 SATA 硬盘,其中 SAS 硬盘主要用于企业级应用和服务器,而 SATA 硬盘则广泛应用于个人计算机和低端服务器。文章通过具体操作示例,帮助读者更好地理解和掌握 Linux 磁盘管理的基本技能。 ... [详细]
author-avatar
CleanTheString
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有