企业官网建设流程全解析

网站流量怎么赚钱,网站制作流程视频教程,c++可视化界面设计,2014网站设计风格Sass常用语法总结类别语法说明示例变量$变量名: 值;存储可复用的值#xff0c;如颜色、尺寸等$primary-color: #3498db;$base-margin: 20px;嵌套选择器嵌套简化CSS层级结构nav { ul { margin: 0; } }父选择器 引用父选择器a { :hover { color: red; } }局部文件与导…Sass常用语法总结类别语法说明示例变量$变量名: 值;存储可复用的值如颜色、尺寸等$primary-color: #3498db;$base-margin: 20px;嵌套选择器嵌套简化CSS层级结构nav { ul { margin: 0; } }父选择器引用父选择器a { :hover { color: red; } }局部文件与导入_文件名.scssimport创建模块化样式文件import variables;import mixins;混合宏 (Mixin)mixininclude定义可重用的样式块mixin flex-center { display: flex; justify-content: center; }.container { include flex-center; }函数function自定义函数处理值function double($n) { return $n * 2; }width: double(10px);继承extend共享一组CSS属性.btn { padding: 10px; }.btn-primary { extend .btn; background: blue; }运算算术运算支持加减乘除和取余width: 100% / 3;font-size: 12px 2px;控制指令if/else条件判断if lightness($color) 50% { background: black; }for循环生成样式for $i from 1 through 3 { .item-#{$i} { width: 20px * $i; } }each遍历列表each $animal in dog, cat, bird { .#{$animal}-icon { background: url(#{$animal}.png); } }while条件循环$i: 1; while $i 4 { .item-#{$i} { width: 20px * $i; } $i: $i 1; }插值#{}在属性名或选择器中插入变量$side: top; margin-#{$side}: 10px;颜色函数lighten()/darken()调整颜色亮度lighten(#3498db, 20%)darken(#3498db, 20%)rgba()设置颜色透明度rgba($primary-color, 0.5)mix()混合两种颜色mix(#3498db, #e74c3c, 50%)注释// 注释/* 注释 */单行注释不编译到CSS多行注释可编译// 这段是单行注释/* 这段是多行注释 */内置函数percentage()转换为百分比width: percentage(0.5); // 50%round()/ceil()/floor()数值取整round(3.7) // 4ceil(3.2) // 4floor(3.7) // 3模块系统use(推荐)导入模块并命名空间use variables as vars;color: vars.$primary-color;实际开发建议变量用于主题色、间距、字体等设计系统值混合宏封装常用CSS模式flex布局、清除浮动等嵌套适度使用避免过度嵌套导致选择器过于复杂模块化使用use替代importSass新版特性函数处理复杂的计算逻辑提高代码复用性典型项目结构styles/ ├── abstracts/ │ ├── _variables.scss # 变量 │ ├── _mixins.scss # 混合宏 │ └── _functions.scss # 函数 ├── components/ # 组件样式 ├── layout/ # 布局样式 ├── pages/ # 页面特定样式 └── main.scss # 主入口文件这些语法在Vue/React项目、响应式设计、主题定制等场景中应用广泛能显著提升CSS开发效率和维护性。