sass相关实例

最新推荐文章于 2024-06-17 16:02:50 发布

weixin_30273931

最新推荐文章于 2024-06-17 16:02:50 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zjclz/p/8057501.html

本文详细介绍了Sass样式语言的基本用法，包括变量声明、变量引用、嵌套选择器、导入样式文件、扩展与继承、算术运算以及颜色操作等功能。通过具体的示例代码展示了如何利用Sass来提高CSS的可维护性和复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sass变量声明：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

变量引用：

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}


嵌套

//sass style

//-----------------------------------

nav {

ul{

margin:0;

padding:0;

list-style:none;

}

li{

display:inline-block;

}

display:block;

padding:6px 12px;

text-decoration:none;

}

导入

//sass style

//-----------------------------------

//reset.scss

html,

body,

ul,

ol{

margin:0;

padding:0;

}

//base.scss

@import 'reset';

body{

font-size:100% Helvetica,sans-serif;

background:#efefef;

}

扩展/继承

//sass style

//-----------------------------------

.message {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

.success {

@extend .message;

border-color: green;

}

.error {

@extend .message;

border-color: red;

}

.warning {

@extend .message;

border-color:yellow;

}

运算

//sass style

//-----------------------------------

.container {width: 100%;}

article[role="main"] {

float: left;

width: 600px / 960px * 100%;

}

aside[role="complimentary"] {

float: right;

width: 300px / 960px * 100%;

}

颜色

//sass style

//-----------------------------------

$linkColor: #08c;

a {

text-decoration:none;

color:$linkColor;

&:hover{

color:darken($linkColor,10%);

}

转载于:https://www.cnblogs.com/zjclz/p/8057501.html