Sass框架的应用

//声明变量
$onewidth:100px;
//声明混合宏
@mixin tow{
  width: 100px;
  height: 100px;
  background-color:aqua;
  border: 1px solid orange;
}
//调用混合宏
.box2{
  @include tow;
}
.box2{
  @include  tow;
}
//声明一个带参数的混合宏
@mixin ouba($kk){
  margin-bottom: $kk;
}
//调用一个带参数的混合宏
.box1{
  @include ouba(20px);
}
.box2{
  @include ouba(50px);
}
//扩展、继承 关键词@extend
.haha{
    outline: none;
  border: 1px solid royalblue;
  padding-bottom: 12px;
}
//调用继承样式
input[type="text"]{
  @extend .haha;
  color: aqua;
}
input[type="password"]{
  @extend .haha;
  color: pink;
}
//占位符
%xixi{
  width: 500px;
  height: 200px;
  background-color: salmon;
}
//使用占位符
.box3{
  @extend %xixi;
}
//调用声明
.box1{
  width: $onewidth;
  height: $onewidth;
  background-color: olive;
}
//属性嵌套
.box1{
  border:{
    top: 2px solid black;
    left: 2px solid red ;
    bottom: 2px solid pink;
    right: 2px solid lawngreen;
  };
  margin: {
    top: 8px;
    bottom: 5px;
    right: 10px;
    left: 10px;
  };
}
时间: 2024-10-08 14:28:40

Sass框架的应用的相关文章

初识sass框架

编写过页面的开发者都知道css这个东西,究其原意,也就是层叠样式表,我们页面的三大结构,html css javascript,其中html负责主要的页面结构,css就负责主要的页面样式,而我们的js就主要负责页面的动态,在这里我们知道css是基于渲染原理,和w3c来设计标准的,对于简单的页面来说,页面内容不是很多,所以样式也就不会很多,这种情况下面编写的css样式表,也就不会显得十分的臃肿,但是如果我们卡开发的是一些比较大型的网站的话,光是页面就会有很多,加上内容和样式,你就会发现里面会有很多

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);

CSS/SASS框架-----Susy

1.简述,唯一的要求是安装SASS,Susy是Compass系统的一部分,建议使用的工具,Breakpoint, Vertical Rhythms. 1.1 Breakpoint 是在css中插入media queries. 1.2 Vertical Reythms 垂直规律指的的文本的排版和间距,文字大小,行高,内距,外距(font-size;line-height;margin-top;margin-bottom,当然涉及border的时候需要一些简单数学计算.) *compass Vert

sass基础以及实战

为什么要在项目中使用Sass 听到最多的一句话就是我会CSS,我能使用CSS写项目,为什么我要花时间去学习Sass,一个自己并不了解的东西,一个对于自己来说是全新的东西?看到这样的问题,让我想起了2010年讨论CSS3的时候,很多同学同样有这样的凝问,CSS3真的会来?我真的要学习CSS3?现在,时间证明了一切.我还是想说,很多东西并不是需要的时候才去学,机会是给有准备的同学. 似乎有些离题了,我们还是回到今天的话题中来,为什么要在项目中使用Sass?在此,我仅想说说我个人的一些看法. 首先,C

开发者又有 10 个新鲜的框架

框架对于开发者来说是个必不可缺的一个应用,所以今天我们为开发者带来了本篇文章. 本文中,我们收集了10个新的框架, 其中一些比其它的更为复杂,提供了更多的配置选项,组件,和接口选项.不管怎样,他们使得你可以在站点上创建出更棒的东西.希望你可以找到最适合你的需求的那一款,好好享受吧 !! 一个框架就是一个软件应用,它可以帮助开发者进行快速设计和开发动态站点.每个月都会有那么几个开发者发布一些五花八门的框架,来使得开发工作更加轻松和高效. Famo.us (本图为:开发者又有 10 个新鲜的框架之F

CSS预处理框架:less,scss

CSS预处理器:less和sass:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用 变量.简单的程序逻辑.函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更 见简洁,适应性更强,代码更直观等诸多好处. less框架的应用:less一门标记性语言,HTML文件还是链接生成的css文件注释:单行注释://编译后不会出现在同名的css文件中多行注释:/* */编译后会出现在同名的css文件中 1.新建less文件2.在编

sass与compass实战(读书笔记)

// compass create myproject // compass compile // compass compile --force 重新编译未改动的 // compass compile --output-style compressed // compass compile --output-style compressed --force // compass watch // compass模块:reset css3 layout typography utilities

Sass与Compress实战:第一章

1.消除冗余代码的方式: ?通过变量来复用属性值 例如,一段冗余的CSS代码: h1#brand { color : #1875e7 } #sidebar { background-color : #1875e7 } 使用Sass,把属性值赋给变量,然后在一个地方管理散落在各处的属性值.几乎任意属性值都可以赋给变量: $company-blue : #1875e7; h1#brand{ color : $company-blue; } #sidebar{ background-color : $

(一)认识Sass和Compass

第一章 Sass和Compass让样式表重焕青春 // 内容概要// 开始学习Sass和动态样式表// 用Sass更高效地写样式表// Compass简介// 用Compass迎接工程实践中的样式挑战 1.2.1 通过变量来复用属性值 1 声明变量:$blue:#1875e7; 2 调用变量:.blue { color:$blue; } 1.2.2 通过嵌套来快速写出多层级的选择器 1 ul{ 2 float:right; 3 li { 4 float:left; 5 a{ color:#111