css里的less和sass

一、LESS概述:less是css的一种概述,在CSS的语法基础之上,它引入了变量,Mixin(混合),运算以及
                      函数等功能。大大的简化了CSS的编写,而且降低了CSS的维护成本。LESS包含一套自定义的语法及一个
                      解析器,根据这些语法定义自己的样式规则,这些会通过解析器(Koala)编译成对应的CSS文件。

二、Less的引入方法:①在html中引入css<link rel="stylesheet"type="text/css"href="styles.css">
                                     ②Less中需要引入另外的Less文件时@import"test2.css";此时的后缀名CSS可以不写。

三、Less的操作步骤①建文件夹②建html文件和Less文件夹③启动考拉④配置路径⑤输入Less文件--koala刷新
                                   ⑥生成用Less名称命名的CSS文件⑦在html里面引入CSS文件
                                   ⑧在Less里面引入文件@import“  .Less”可变或者“  .css"不可变

四、Less变量(值可变)专用符号@写法:声明:@变量名(自取)接值 
                      1、混合(Mixn)(值固定)写法:①class属性类: .名称(自取){声明};
                                                 ②ID属性类:#名称(自取){声明}
                                                 ③元素属性类:<div>、<p>等{}

2、带参数的混合(值可变):①class属性类: .名称(自取)(参数){属性名:参数(参数固定值)}
                                                ②不带参数的属性类:.名称(自取)(参数){声明}
                      3、多参数混合
                      4、参数集合@aruments
                 五、①sass从c盘开始任何文件夹不能出现中文,建文件时也不要出现中文。
                      ②sass有两种后缀名:1、.sass不允许出现{}和逗号、2、.scss可以出现{}和逗号(我们加后缀名用这种)

六、①sass的写法:声明抬头写,专用符号$,$.变量名(自取):值;!default默认变量值
                      ②sass有两种嵌套:1、选择器嵌套,2、属性嵌套 注:at-root跳出嵌套
                     ③混合(mixin)声明的时候:1、无参数@mixin(固定写法)名称(){}  注:调用时必须是@include+名称
                                                          2、有参数@mixin名称$opality:50{}调用时同上

七、960栅格式布局法:
                           屏幕分辨率为1024*768,采用界面宽为960px的一种布局方式有以下几种布局
                           ①12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)
                           ②16列式:每格40px 间距40px 3 3 6 4版 四格式布局
                           ③24列式:每格30px 间距10px (很少用)
                           ④32列式:(极少用)
                           容器:container _x.后面的x表示数字,列如 container _12表示将页面进行12等份

八、bootstarp框架:它是基于JQuery封装的一种框架,采用三格式布局,自带响应式

时间: 2024-11-05 12:10:50

css里的less和sass的相关文章

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1  设定背景图的大小 在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要

关于解决网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Content/”以及“./Content/”之类的,但实际操作并没能实现新上传的图片路径加载到css代码中.首页部分css代码贴出: 1 /*--banner--*/ 2 .banner { 3 background:url(../images/banner-1.jpg) no-repeat 0px 0px

只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!

有些人想学CSS,不知如何下手:有些人已经学会CSS的各种属性,却不知如何运用:有些人会平面设计,不知道如何与网页设计结合:有些人会HTML,就是学不会CSS.试问自己,图中的技术你都会了吗? 别总是怨天尤人了,<CSS高效开发实战-CSS 3.LESS.SASS.Bootstrap.Foundation>书写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具.框架.预处理来提升开发效率和节约人力成本,确保所讲解的内容读者都能活学活用. 曾就职于CSDN和淘宝的一

css里hd与hd

第二次改版的主页代码已经差不多敲完了,但是还是遇到了如下几个问题 1,各个频道里的栏目高度是不对齐,影响美观,纵观qq财经和163财经,大家也都是用内容固定高度,但是这个高度就恰好就对称,不知道是什么原理? 2,css代码的重用,css代码已经550行了,超过了以往编的数量,这样带来的问题是,很多临时起的类名就有问题.比如:.layout1 .leftarea .div 这样直接引的 还有直接给图书栏目加个类 .tushu 这样造成了一定的混用和混乱,一定的修改优化是必须的了 ,内容跟样式分离也

使用CSS里的user-select属性控制用户在页面上选中的内容

CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它东西.user-select属性的作用是元素级别的,它不仅可以作用整个页面,也可以只在指定的元素和其子元素上生效. "user-select"属性在各大浏览器里都还是实验性的属性,以后有可能废弃,也有可能转正,目前使用各种浏览器引擎前缀,它的作用还是能发挥的不错的. user-select

css里的BFC用法

css里的BFC用法 BFC(Block Formatting Contexts),可以把BFC理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素. 规则 1.内部的盒子会在垂直方向,一个个地放置. 2.BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素 3.属于同一个BFC的两个相邻BOx的上下margin会发生重叠 4.计算BFC的高度时,浮动元素也参与计算 5.每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此: 6.BFC的区域不会与float

CSS里display属性

css里display属性 在了解css的display属性之前,我想先介绍一下display属性所能改变的元素都有什么. 元素类型 元素类型可分为三种,分别是: 块状元素(例如div.dl.form.p等) 内联元素(例如a.b.br.img.input等) 可变元素 也可以分为:块状元素.内联元素.内联块元素 而在盒子模型可通过display属性改变默认的显示类型. display的属性 盒子模型可通过display属性来改变默认的显示类型 display的属性值 display的属性值有许

CSS预处理语言——less与sass的使用

我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用 我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动,比较麻烦 首先我们来说一下Less. [Less中的变量] 1.声明变量使用 @变量名:变量值: 2.使用变量 @变量名 >>less中的变量类型: ①数字类 1 10px ②字符串:无引号字符串 red 和有引号字符串"gdak" ③颜色类 red #000000 rgb(

CSS里的各种水平垂直居中基础写法心得

首先,依旧是概念.介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置. 行内元素(又叫内联元素inline element): ①不占据一整行,随内容而定,有以下特点: ②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变. ③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用. ④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用. 常