sass的四种css编译风格

1.nested:默认

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

2.expanded

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

3.compact

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

4.compressed

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
时间: 2024-10-12 08:36:21

sass的四种css编译风格的相关文章

常用的四种CSS样式表格

1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable th {

转载:CSS实现三栏布局的四种方法示例

转载网址:http://www.jb51.net/css/529846.html 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 HTML代码如下: <div class="left&quo

CSS的四种引入方式

CSS的引入方式最常用的有三种, 第一:在head部分加入<link  rel="stylesheet" type="text/css" href="my.css"/>,引入外部的CSS文件. 这种方法可以说是现在占统治地位的引入方法.如同IE与浏览器.这也是最能体现CSS特点的方法:最能体现DIV+CSS中的内容与显示分离的思想,也最易改版维护,代码看起来也是最美观的一种. 第二:在head部分加入<style type=&q

div与css结合的四种方式

第一种方式:               <div style=" background-color:#00ff00;font-size: 20px"> 第一种方式</div >               缺点:这种方式暴露的缺点是 代码严重重复. 第二种方式: 格式:标签名{                     属性一:属性值:                     属性二:属性值:                     ...           

CSS四种设置方式

上面这张思维导图已经大概的讲明白了四种设置方式的不同点,下面就细入说明一下各自的用法和注意点. 1.嵌入样式表 <html> <head> <title>CSS四种设置方式</title> </head> <body> <p style="color:red;font-size:2cm;background-color:gray; border:2px solid blue">内联样式表</p&g

css样式表中四种属性选择器

css样式表中四种属性选择器1> 简易属性 tag[class]{ font-weight:bold } It will affect all tag with any class. e.g. <h2 class="old" > or <h2 class="new"> 2>精确属性值 a[href="http://www.cnblogs.cn"][title="textTitle"]{fon

HTML5样式和列表、CSS链接的四种状态

一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel="stylesheet":外部样式表: 3.三种样式表插入方法: (1)外部样式表: 在<head></head>中写入: <link  rel="stylesheet"  type="text/css"  href=&q

css和html的四种结合方式

1.在每个html网页的body中使用 <div style="background-color:black;color:red;">asdasd</div> 2.使用html中的一个标签实现<style>标签,写在head里面 <style type="text/css"> div{ background-color:black; color:red; } </style> </head> &

CSS样式四种引入方式

第一种将样式代码写在页面<style>......</style>标签之中,用<style>......</style>标签将body设置一个灰色的背景: <!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <style>    body{     back