初识sass框架

编写过页面的开发者都知道css这个东西,究其原意,也就是层叠样式表,我们页面的三大结构,html css javascript,其中html负责主要的页面结构,css就负责主要的页面样式,而我们的js就主要负责页面的动态,在这里我们知道css是基于渲染原理,和w3c来设计标准的,对于简单的页面来说,页面内容不是很多,所以样式也就不会很多,这种情况下面编写的css样式表,也就不会显得十分的臃肿,但是如果我们卡开发的是一些比较大型的网站的话,光是页面就会有很多,加上内容和样式,你就会发现里面会有很多重复性的代码,比如导航,一些div的样式,一些footer,nav等等,其中的样式规则是相同的,但是我们在进行开发的时候还是得进行重复的编写,这在无形之中就增加了我们的工作量。

思考一下有没有什么办法可以解决这一个问题呢?办法总是会有的,但是我们需要注意的就是选择一个高效的,之前提到过的使用angular中的模板引入,但是这样做的缺点就是即使你只需要引入很少的样式,但是你都得写很多的代码,这样做显然不太适合,在这里我们compass的sass框架,作为css的代表作品诞生了,下面我们就来领略一下这个神奇的sass。

我们都知道css充其量只能算是样式规则,样式表,还算不上是一个语言,因为在css中我们没有别的编程语言所能够使用的变量啊,赋值啊,继承什么的,但是在这里,我们sass的出现,就可以使得css变成语言,能够赋予它语言的特有属性,让css去组织模块,封装,复用代码,更重要的是让css看上去更加具有设计感,但是在这里我们仍然需要明白的是sass并不会让你写出更好的代码,如果你需要提高你的css代码水平。建议还是熟悉掌握基本的css语法,以及元素的使用方法,加上不断的项目经验,在这里sass能够帮你做到的是让你更高效的写出高可维护性的代码,主要体现在一下几个方面:

1.sass对于原生的[email protected]指令的扩展,我们都知道在一个页面中引入外部样式表有多种方法,但是@inport我们是不会选择去用的,主要是因为其效率实在很低。

但是在这里的@import可以把样式分散到多个更小的文件中去,这样一来整个css的结构马上就会变得清晰了。

2.其中的变量机制,通过sass我们可以避免之前的样式规则如行高,颜色,定位等等这里需要写,那边完全相同还是需要写,这sass就提供了一个统一的地方归纳整理,开发者如果需要改变一些布局,直接在变量上更改就会应用到整个页面中去,如果是传统的话需要页面的更改,那工作量就大了。

3.标准样式的分离,就像我们调用函数一样,将一些样式抽取出来,避免我们的复制粘贴。

4.这里深入了样式继承的概念,这个大大简化了我们查找bug的工作,我们需要的只是从父元素的继承机制入手,就可以轻松搞定。

以上简单罗列了一些sass的好处,通过这个可以让我们感受到sass和compass不仅是我们的开发者工具更是web设计师的设计工具,在熟悉了sass的基础上我们在完成页面的时候需要的就是一个对整个页面的一个宏观把控,我们不是站在编写页面的高度去看待,我们需要站在页面设计师的高度去看待。更多的sass方面的知识没有办法在这里一一罗列,感兴趣的可以去查一些资料,见识一下这个神奇的工具。

时间: 2024-10-09 22:44:47

初识sass框架的相关文章

less框架和sass框架

 less框架 @width: 200px; // 带参数的混入,括号中是参数,值可变 .margin(@value){ margin-bottom: @value; } .box1{ width: @width; height: @width; background-color: red; // 引用带参数的混入,将变量直接赋值 .margin(10px); } .box2{ // 将一个已声明好的类(.box1)作为声明给另一个元素(.box2) .box1; .margin(30px);

IT兄弟连 HTML5教程 初识Sass Sass基本语法

本文重点在于HTML5与CSS3的学习和使用,HTML与CSS不属于编程范畴,更偏向于设计,而Sass是编程化的CSS的扩展语言,对于没有接触过编程的读者可能会有点吃力,这里不做对语法详细介绍,仅作为基本介绍,让读者了解Sass的优越性,如果对Sass感兴趣,请自行查阅相关资料. Sass基本语法 在大部分编程语言之中,其基本语法都包括这样一些东西,比如说变量.数据类型.运算符.流程控制语句.函数等,具体的这些名词都具有什么功能呢?那么笔者来依次进行介绍. 1.变量 变量,顾名思义,就是可以动态

初识Polymer框架

什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框架. polymer的核心思想是"Everything is an element",一切皆组件. polymer 可以通过Twitter的包管理器bower,方便的进行组件(Elements)及包的依赖管理,不必自己从git上下载组件. polymer分层结构: 元素层(Elemets)

初识Web框架

一.Web框架本质 Python的Web框架分为两类: 通过socket自己写程序,自己处理请求: 基于Wsgi(Web Server Gateway Interface:Web服务网关接口),处理请求. ?众所周知,对于所有的Web应用而言,本质上其实就是一个socket服务端,用户浏览器其实就是一个socket客户端. 1.Socket实现Web框架的本质 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

初识MyBatis框架

框架架构 框架架构讲解: (1)加载配置:配置来源于两个地方,一处是配置文件,一处是Java代码的注解,将SQL的配置信息加载成为一个个MappedStatement对象(包括了传入参数映射配置.执行的SQL语句.结果映射配置),存储在内存中. (2)SQL解析:当API接口层接收到调用请求时,会接收到传入SQL的ID和传入对象(可以是Map.JavaBean或者基本数据类型),Mybatis会根据SQL的ID找到对应的MappedStatement,然后根据传入参数对象对MappedState

(28)初识struts框架

案例剖析中介绍了一个自己写的mystruts框架,这里开始简单的认识struts框架. 1.先看一个简单的struts开发的例子来熟悉一下流程 Struts就是基于mvc模式的框架! (struts其实也是servlet封装,提高开发效率!) Struts开发步骤: 1.web项目,引入struts - jar包 2. web.xml中,引入struts的核心功能 配置过滤器,通过配置一个过滤器来引入structs中的一些服务--org.apache.struts2.dispatcher.ng.

初识Hibernate框架

Hibernate是一种ORM框架 常用于数据库的访问层 Hibernate的核心组件:Configuration类,SessionFactory接口,Session接口,Query接口,Transaction接口: 1)Configuration类:用来读取Hibernate配置文件,并生成SessionFactory对象. 2)SessionFactory接口:产生Session实例工厂. 3)Session接口:Hibernate的核心接口,通过get(),load(),save(),up

初识struts2框架

一.struts2开发环境的搭建 1.1拷贝jar包到classpath中(找到struts2自带例子中struts-blank的war包,将\web-inf\lib目录下的jar包全拷贝) 1.2创建struts2配置文件(在最顶层的构建路径下,建立一个默认名为struts.xml的配置文件) 1.3配置控制器 a.配置位置:web.xml b.配置内容:参照servlet配置内容 <filter> <filter-name></..> <filter-clas

Sass:初识Sass与Koala工具的使用

一.下载 Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输出方式 [扩展]SASS提供四个编译风格的选项: nested:嵌套缩进的css代码,它是默认值. expanded:没有缩进的.扩展的css代码. compact:简洁格式的css代码. compressed:压缩后的css代码. 四.又到了写代码的时候啦,随便用一款文本编写工具打开demo.s