首页 > 其他分享 >CSS预处理器Sass,面基八股全面总结

CSS预处理器Sass,面基八股全面总结

时间:2024-08-22 12:23:32浏览次数:8  
标签:Sass 嵌套 color primary width CSS 面基

CSS预处理器Sass

文末有超多前端资料~已帮助500+名同学完成改造!

1. 变量(Variables):

变量在Sass中以$开头,用于存储值,以便在多个地方重用。

   $primary-color: #007BFF;
   body {
     color: $primary-color;
   }

2. 嵌套规则(Nested Rules):

Sass允许将CSS规则嵌套在相关的规则内,使代码更整洁。

   nav {
     ul {
       margin: 0;
       padding: 0;
       li {
         display: inline-block;
       }
     }
   }

编译后的CSS:

   nav ul {
     margin: 0;
     padding: 0;
   }
   nav ul li {
     display: inline-block;
   }

3. 混合(Mixins):

Mixins用于创建可复用的代码块,可以接受参数。

   @mixin button-style($color) {
     background: $color;
     border-radius: 4px;
     padding: 10px 20px;
   }

   .primary-btn {
     @include button-style($primary-color);
   }

   .secondary-btn {
     @include button-style(#6C757D);
   }

4. 继承(Inheritance):

使用@extend关键字可以让一个选择器继承另一个选择器的样式。

   .btn {
     font-size: 16px;
     text-decoration: none;
   }

   .primary-btn {
     @extend .btn;
     background: $primary-color;
   }

5. 列表(Lists):

列表用于存储多个值,可以是逗号分隔或空格分隔。

   $grid-columns: 12;
   $gutter-width: 20px;

   .container {
     width: calc((100% / $grid-columns) - ($gutter-width * ($grid-columns - 1)));
   }

6. 映射(Maps):

映射用于存储键值对,类似JavaScript的对象。

   $breakpoints: (
     small: 480px,
     medium: 768px,
     large: 1024px
   );

   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
       .container {
         max-width: $width;
       }
     }
   }

7. 函数(Functions):

自定义函数可以处理值并返回结果。

   @function calculate-size($ratio, $base-size) {
     @return $base-size * $ratio;
   }

   .element {
     width: calculate-size(0.5, 100px);
     height: calculate-size(0.75, 100px);
   }

8. 导入(@import):

使用@import导入其他Sass文件。

   // variables.scss
   $primary-color: #007BFF;

   // mixins.scss
   @mixin button-style($color) {
     /* ... */
   }

   // styles.scss
   @import 'variables';
   @import 'mixins';

   .primary-btn {
     @include button-style($primary-color);
   }

9. 选择器层级(Selector Nesting):

可以通过层级选择器来组合和简化CSS选择器。

   .parent-class {
     &__child-class {
       /* ... */
     }
   }

10. 注释(Comments):

Sass支持两种注释,单行//和多行/* ... */,其中多行注释在编译后会被保留。

11. 条件语句(Conditional Statements):

Sass提供@if@else if, 和 @else来实现条件逻辑。

    $is-mobile: false;

    .content {
      @if $is-mobile {
        font-size: 14px;
      } @else {
        font-size: 18px;
      }
    }

12. 循环(Loops):

使用@for@each@while来迭代和重复代码。

    // 使用@for循环生成CSS序列
    @for $i from 1 through 5 {
      .item-#{$i} {
        width: 100px * $i;
      }
    }

    // 使用@each遍历列表
    $fonts: Arial, sans-serif, Georgia, serif;
    @each $font in $fonts {
      body {
        font-family: $font, #{$font + ', '};
      }
    }

    // 使用@while循环
    $count: 5;
    @while $count > 0 {
      .loop-#{$count} {
        content: "Count: #{$count}";
      }
      $count: $count - 1;
    }

13. 嵌套媒体查询(Nested Media Queries):

与CSS规则类似,Sass允许嵌套媒体查询,使代码更整洁。

    .element {
      color: black;

      @media (min-width: 600px) {
        color: white;
      }
    }

14. 延展(Extend)的更高级用法:

使用@extend可以创建更复杂的继承关系,例如与伪类和伪元素结合。

    %hover-state {
      &:hover {
        background: darken($primary-color, 10%);
      }
    }

    .primary-btn {
      @extend %hover-state;
      background: $primary-color;
    }

15. 模块化和BEM方法论:

结合Sass的特性,如嵌套规则和变量,可以实现BEM(Block Element Modifier)方法论,提高代码的可维护性。

    .button {
      &__text {
        font-weight: bold;
      }

      &--primary {
        background: $primary-color;
      }

      &--secondary {
        background: $secondary-color;
      }
    }

16. 嵌套选择器的注意事项:

虽然嵌套选择器使代码更易读,但过度嵌套可能导致CSS体积过大,影响性能。尽量保持选择器简洁,避免过深的嵌套。

17. Sass的版本和兼容性:

注意Sass有两个主要版本:SCSS(Sassy CSS)和indented syntax(Sass)。SCSS更现代,更接近CSS语法,而indented syntax使用缩进表示嵌套。大多数现代项目使用SCSS。

18. 自动化工具:

结合自动化工具(如Webpack、Gulp或Grunt)和构建系统,可以自动化Sass编译和优化过程,确保生产环境的CSS是最优的。

19. 响应式设计和媒体查询:

使用Sass的嵌套媒体查询,可以更方便地编写响应式CSS。

    .container {
      width: 100%;
      
      @media (min-width: 768px) {
        width: 80%;
        float: left;
      }
    }

20. 自定义函数(Custom Functions):

定义自定义函数,可以处理复杂的计算或逻辑。

    @function calculate-spacing($size, $multiplier: 2) {
      @return $size * $multiplier;
    }

    .element {
      padding: calculate-spacing(10px);
    }

21. 运算符(Operators):

Sass支持算术、比较和逻辑运算符,使得在CSS中进行计算更加方便。

    .box {
      width: 100px + 50px;
      height: 200px - 50px;
      margin: 5px * 2;
      opacity: 0.5 / 2;
    }

22. 嵌套选择器的限制:

虽然嵌套选择器很有用,但过度嵌套可能导致CSS难以理解和维护。尽量保持选择器深度不超过3级,以防止过于复杂。

23. Sass的错误处理:

当Sass遇到语法错误时,它会生成错误消息,帮助你找到问题所在。了解这些错误信息可以帮助你更快地调试代码。

24. Sass的调试(Debugging):

使用@debug语句可以在编译过程中输出变量和表达式的信息,帮助调试。

    $value: 10px;
    @debug "Value is: #{$value}";

25. Sass的源映射(Source Maps):

开发时启用源映射,可以使浏览器开发者工具在编辑Sass源文件时,显示原始的Sass代码,而非编译后的CSS。

26. Sass的@use和@mixin规则:

新版Sass(Sass 7.0+)引入了@use规则来代替@import,并提倡使用@mixin而不是@extend,以提高CSS的可维护性和性能。

27. Sass的模块系统:

使用@use规则可以组织代码为模块,每个模块有自己的作用域,避免变量和选择器冲突。

    // _variables.scss
    $primary-color: #007BFF;

    // _buttons.scss
    @use 'variables';
    .button {
      background: variables.$primary-color;
    }

28. 保持Sass代码简洁:

与编写任何代码一样,保持Sass简洁、清晰和模块化,遵循DRY(Don't Repeat Yourself)原则,避免冗余代码。

需要超多前端笔记的同学转发本文+关注+【 点击此处】即可获取! 加油

整份文档一共有几百道题万字以上,全都是近期高频面试题知识点,不仅有答案,而且有详细的解析,为了不影响大家的阅读体验就只展示了部分内容,还望大家海涵,这份文档绝对可以帮助大家提升复习效率,加大面试的成功率,也节省大家在网上搜索资料的时间来学习,最后祝所有复习过我文章里学习内容的小伙伴们,每个人都能拿到心仪offer,欢迎大家讨论交流!

标签:Sass,嵌套,color,primary,width,CSS,面基
From: https://blog.csdn.net/2401_84489283/article/details/141423260

相关文章

  • css 中 nth-child、first-child、last-child 的使用(选中第一个,第几个,第几个到第几个,最
    可以配合li标签使用,选择一列中的哪些标签。 1.first-child 选择列表中的第一个标签li:first-child{color:red} 2. last-child选择列表中的最后一个标签li:last-child{color:pink} 3.nth-child(n)这里的n为数字,表示选择列表中的第n个标签例如选择第三个标签li:nth-......
  • CSS基础知识
    一、CSS介绍1、什么是CSS?CSS指层叠样式表 (Cascading Style Sheets)又叫级联样式表样式定义如何显示 HTML元素样式通常存储在样式表中把样式添加到HTML4.0中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS文件中多个样......
  • Nuxt3 使用animate.css来实现页面切换过渡效果
    首先,如果两个page分别在不同的layout下,是无法使用pageTransition来实现切换效果的,这时候需要使用layoutTransition来实现切换效果这里采用npmpackage的方式安装animate.css,当然采用cdn的形式也是可以的npmianimate.css然后在app.vue中导入<scriptsetup>import"anima......
  • CSS详知识点——CSS变形
    transform:属性translate():平移函数,基于X、Y坐标重新定位元素的位置translateX(tx)表示只设置X轴的位移#yi{transform:translate(50px,30px);}#yi{transform:translateX(100px);//只移动X轴上的方向}#yi{transform:......
  • 如何用css制作一个三角形?
    在CSS中,你可以使用多种方法来实现三角形。以下是两种常见的方法:方法一:使用边框(border)你可以使用一个空div,并利用其边框的宽度和颜色来创建三角形。例如,如果你想创建一个朝上的三角形,你可以这样写:创建一个向上的三角形HTML代码:html<divclass="triangle-up"></div>CSS代......
  • html+css+js -SE
    前端基础编辑器的vscode插件安装AutoRenameTag自动修改标签对插件ChineseLanguagePack汉化包HTMLCSSSupportHTMLCSS支持IntellijIDEAKeybindingsIDEA快捷键支持LiveServer实时加载功能的小型服务器openinbrowser通过浏览器打开当前文件的插件Prett......
  • CSS2基础(part-1)
    CSS2基础基础简介【全称】CascadingStyleSheets,又名层叠样式表层叠:一层一层涂上去表:列表样式:如文字大小,颜色,元素宽高等。CSS描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。语言类型标记语言,为HTML结构美化样式,实现语义与效果的分离,更好地美化......
  • 如何用纯CSS绘制三角形--03
    下拉菜单中的箭头通常用于提示用户点击以展开菜单。CSS三角形实现这个箭头: <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • 如何用纯CSS绘制三角形
    要用纯CSS绘制三角形,可以通过利用CSS中的border属性来实现。具体来说,核心原理是通过设置不同方向的边框颜色和宽度来形成三角形效果。以下是写技术博客时可以介绍的几个要点:1.三角形的基本原理CSS三角形的关键在于设置一个元素的宽高为0,同时通过边框来创建三角形。例如:.trian......
  • 如何用纯CSS绘制三角形--02
    通过结合@keyframes动画,让三角形实现旋转、移动等动态效果 代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......