HAML 1.5以后的新特性要数
sass最为吸引人了。昨天试用了一下,确实让css文件简洁了不少。支持常量和缩进嵌套。比如说scaffold生成的CSS:
.errorExplanation {
margin-bottom: 20px;
font-size: 10px;
}
.errorExplanation h3, .errorExplanation h2 {
background: #e33;
padding: 3px;
margin-bottom: 0;
font-size: 14px;
color: #fff;
}
.errorExplanation ul {
background: white;
list-style: square;
border-bottom: 2px solid #e33;
margin: 0 0 5px 0;
padding: 5px 0 5px 20px;
}
.errorExplanation li {
font: 12px 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin:0;
margin-left: 0;
padding: 0;
}
改写成sass后变成了:
!error_background = #e33
.errorExplanation
:margin-bottom 20px
:font-size 10px
h3, h2
:background = !error_background
:padding 3px
:margin-bottom 0
:font-size 14px
:color !white
ul
:background white
:list-style square
:border-bottom 2px solid !error_background
:margin 0 0 5px 0
:padding 5px 0 5px 20px
li
:font 12px 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif
:color #000
:margin 0
:margin-left 0
:padding 0
分享到:
相关推荐
PostCSS插入 一个插件,可以将CSS属性从一个类插入另一个类,例如Sass的@extend更好! 好吧,如果您在了解@extend之前就已经使用过Sass,那么这个概念非常简单:您可以采用一个类的属性,然后以一种简单的方式将它们...
在CSS中,每个元素都被看作一个盒子,包括内容区域、内边距(padding)、边框(border)和外边距(margin)。标准盒模型(standard box model)规定了元素的宽度和高度只包括内容区域,不包括内边距和边框。当设置一...
下载扩展,然后在保存时编译SASS文件(Web编译器以前 ) 快速开始 将样板复制到新的存储库 重命名所有内容(文件夹+项目+程序集名称+项目属性中的默认名称空间) 在“ Boilerplate.Web”->“ CustomerNameSpace.Web...
标题"css欣赏很多css实例和代码是学习css的好东西"暗示了这个压缩包可能包含一系列CSS实例和代码片段,旨在帮助学习者通过实际案例来提升CSS技能。通过这些实例,你可以了解到不同的CSS技巧和最佳实践,例如如何选择...
BEM Constructor 是一个 Sass 库,用于构建不可变和命名空间 BEM 样式的 CSS 对象。 通过实施一致的编程方式来定义对象(块、元素和修饰符),它确保了一个更结构化、更健壮和更安全的对象代码库,并且易于理解和...
它附带有Gulp,Babel,Nunjucks,Bootstrap,jQuery和Sass,使您超级轻松地创建更好的工作流程。包括什么? 安装Gulpazan时会附带哪些著名的npm软件包... Gulp:用于在开发工作流程中自动执行繁琐或耗时任务的工具...
眼镜熊这是一个空的Grunt入门项目,预装了Babel,Sass,livereload等好东西。如果您已经有了Grunt,则几乎不需要任何设置。 这只是一个空的Web项目,随时可以使用。 仅开发(未压缩)文件夹的演示已实时发布: 仅...
在这个压缩包中,"css的例子好东西"这个标题和描述反复提及,暗示我们将会探讨CSS的一些实际应用和优势。 在`index.html`文件中,通常包含网页的结构内容,如标题、段落、链接等元素。这些元素通过HTML标签定义,但...
3. 规则集:一个规则集包含一个或多个选择器和它们对应的属性值,如`p {color: red; font-size: 16px;}`。 4. 内联样式、内部样式表和外部样式表:内联样式是直接在HTML元素中使用`style`属性定义;内部样式表位于`...
这是一个可以在任何地方使用的 Sass 项目的准备滚动设置! 如果您愿意,请跳转到某个部分: ** * Sass,而不是SASS()。 ** 每个人的做法都不一样,这就是我的做法! 安装 Sass 和 Compass 非常以 Mac 为中心的说明...
简约但灵活且强大的 SCSS / CSS 框架1.11 版本发布Blackhole 是一个简约、语义化、模块化但功能强大且灵活的SASS/CSS 框架,其唯一目的是为开发人员(您)提供一种关于如何构建其网站/应用程序的新方法,旨在使他们...
#WPBaseFoundation ##一些注意事项一个非常空白的主题,Foundation5使用了Compass / Sass。 这本来是一个非常空白的主题,无非就是入门工具。 可以将其视为Bones或Blankslate。 只使用您需要的东西。请随时回馈这个...
- Div元素是一个块级元素,它默认占据整个父容器的宽度,并在新的一行开始显示。 - 通常通过CSS来设置Div的样式,如宽、高、边距、填充等属性。 - 用ID或类选择器为Div分配特定的样式或行为。 - 通过嵌套Div,...
这里是一个小项目,让你有一个很好的去PostCSS webpack构建成一个简单的jekyll静态站点。 特征 现代的livereload环境; 两者webpack和jekyll将livereload浏览器。 是的,再也没有刷新! css和js都以静态文件结尾。...
一个易于使用的应用程序中提供了数十种现代Web开发工具。开始工作时无需格格不入,大吃一惊,也无需47次堆栈溢出。 编译每种语言 CodeKit会自动编译您在教程中了解到的所有那些很棒的语言。 所有酷孩子 开箱即用地...
这是一个样板 jekyll 设置,包括引导程序和其他一些漂亮的东西。 这是我在开发静态网站时通常使用的。 这比直接使用静态 html 和 css 文件要好,因为: Sass 是自动编译的它包含来自 Jekyll 和 Octopress 的许多很...
本手册旨在为初学者提供一个全面的指南,帮助他们掌握CSS的基本概念、语法以及高级技巧。通过学习,你可以创建美观、响应式的网页,并实现对网页元素的精确控制。 **一、CSS基础** 1. **CSS语法**:CSS通过选择器...
描述中提到的“绝对是好东西”,暗示这些模板可能是高质量的设计,具有一定的实用价值。提到在淘宝上有卖家以几十元的价格出售,表明这些模板有一定的市场价值,而提供免费下载则体现出分享精神。 标签“模板”、...
我想要一个适合我的开发风格,适合我在大多数项目中使用的所有技术的项目入门者。 这个怎么运作 使用Webpack设置此样板以在本地服务器上开发(您可以使用Nitro / Docker甚至Mamp,使用任何您想要的东西)。 dev脚本...
使用必要的工具来处理TypeScript,JSX,动态导入,SASS等进行设置非常耗时。 该项目还具有部分水化功能,以减少交付给用户的代码量。 结构体 项目通过模块模式构建,文件通过功能分组,例如./src/modules/home 。 这...