如何使用 SASS 在垂直文本之外添加行？

在本文中，我们将了解如何使用 SASS 添加一些垂直文本之外的行。

方法： HTML代码用于描述body的基本结构。在这里，我们定义了一个带有wrapper类的除法元素来包含后续的除法元素。定义了另一个具有垂直文本类的除法元素，并使用 SASS 中的transform属性将其旋转了 90 度。对于文本的其余部分，另外两个划分元素分别用类item-top和item-bottom定义，以表示除垂直文本之外的其他一些文本，并且这些划分元素被包裹在具有一类项目的另一个划分元素中。

来到 SASS，要在垂直文本旁边添加一行，我们使用border-bottom属性，因为旋转元素的底部实际上显示为垂直边框。由于转换操作使垂直文本超出了文档的正常流程，因此其他划分元素的边距和填充也会相应调整。

示例 1：这里，垂直文本是一个随机日期（在本例中为 2022 年 2 月 27 日），并且在它旁边有一行使用border-bottom 属性定义（如前所述）。

style.scss

body {
    text-align: center;
}
  
h1 {
    color: green;
    font-size: 2.5rem;
}
  
p {
    font-size: 1.25rem;
}
  
.wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 600px;
    min-width: 600px;
    margin: 6rem auto 0 auto;
}
  
.vertical-text {
    display: flex;
    transform: rotate(-90deg);
    border-bottom: 2px solid black;
    padding-left: 5.5rem;
  
    p {
        padding-bottom: 0.1rem;
    }
}
  
.items {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: -3.8rem;
    margin-top: -3rem;
  
    p {
        padding-left: 1rem;
    }
}
  
.item-top {
    p {
        padding-bottom: 1rem;
    }
}
  
.item-bottom {
    border-top: 2px solid black;
  
    p {
        padding-top: 1rem;
    }
}

style.css

body {
    text-align: center;
}
  
h1 {
    color: green;
    font-size: 2.5rem;
}
  
p {
    font-size: 1.25rem;
}
  
.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    max-width: 600px;
    min-width: 600px;
    margin: 6rem auto 0 auto;
}
  
.vertical-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    border-bottom: 2px solid black;
    padding-left: 5.5rem;
}
  
.vertical-text p {
    padding-bottom: 0.1rem;
}
  
.items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-left: -3.8rem;
    margin-top: -3rem;
}
  
.items p {
    padding-left: 1rem;
}
  
.item-top p {
    padding-bottom: 1rem;
}
  
.item-bottom {
    border-top: 2px solid black;
}
  
.item-bottom p {
    padding-top: 1rem;
}

index.html



  

    
    
      
    
    

  

    GeeksforGeeks
    
        
            27 Feb 2022
        
        
            
                GeeksforGeeks
            
            
                GeeksforGeeks is a computer
                   science portal for geeks.

style.scss

body {
    text-align: center;
}
  
h1 {
    color: green;
    font-size: 2.5rem;
}
  
p {
    font-size: 1.25rem;
}
  
.wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 600px;
    min-width: 600px;
    margin: 6rem auto 0 auto;
}
  
.vertical-text {
    display: flex;
    transform: rotate(90deg);
    border-top: 2px solid black;
    padding-right: 3rem;
    color: green;
    font-weight: bold;
}
  
.items {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: -5.8rem;
    margin-top: -3rem;
  
    p {
        padding-left: 5rem;
    }
}

style.css

body {
    text-align: center;
}
  
h1 {
    color: green;
    font-size: 2.5rem;
}
  
p {
    font-size: 1.25rem;
}
  
.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    max-width: 600px;
    min-width: 600px;
    margin: 6rem auto 0 auto;
}
  
.vertical-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    border-top: 2px solid black;
    padding-right: 3rem;
    color: green;
    font-weight: bold;
}
  
.items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-left: -5.8rem;
    margin-top: -3rem;
}
  
.items p {
    padding-left: 5rem;
}

index.html



  

    
    
  
    
    

  

    GeeksforGeeks
    
        
              
GeeksforGeeks
  
        
        
            
                
                    GeeksforGeeks is a Computer Science
                    portal for geeks. It contains
                    well written, well thought 
                    and well explained computer 
                    science and programming articles.

输出：生成的 CSS 输出将如下所示。

样式.css

body {
    text-align: center;
}
  
h1 {
    color: green;
    font-size: 2.5rem;
}
  
p {
    font-size: 1.25rem;
}
  
.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    max-width: 600px;
    min-width: 600px;
    margin: 6rem auto 0 auto;
}
  
.vertical-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    border-bottom: 2px solid black;
    padding-left: 5.5rem;
}
  
.vertical-text p {
    padding-bottom: 0.1rem;
}
  
.items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-left: -3.8rem;
    margin-top: -3rem;
}
  
.items p {
    padding-left: 1rem;
}
  
.item-top p {
    padding-bottom: 1rem;
}
  
.item-bottom {
    border-top: 2px solid black;
}
  
.item-bottom p {
    padding-top: 1rem;
}

索引.html



  

    
    
      
    
    

  

    GeeksforGeeks
    
        
            27 Feb 2022
        
        
            
                GeeksforGeeks
            
            
                GeeksforGeeks is a computer
                   science portal for geeks.

输出：

例2：这个例子和前面的例子很相似，唯一的区别是除了垂直旋转的文本之外，只有一个项目划分元素。此外，垂直文本将反向旋转 90 度而不是负 90 度。

样式.scss

body {
    text-align: center;
}
  
h1 {
    color: green;
    font-size: 2.5rem;
}
  
p {
    font-size: 1.25rem;
}
  
.wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 600px;
    min-width: 600px;
    margin: 6rem auto 0 auto;
}
  
.vertical-text {
    display: flex;
    transform: rotate(90deg);
    border-top: 2px solid black;
    padding-right: 3rem;
    color: green;
    font-weight: bold;
}
  
.items {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: -5.8rem;
    margin-top: -3rem;
  
    p {
        padding-left: 5rem;
    }
}

输出：生成的 CSS 输出将是：

样式.css

body {
    text-align: center;
}
  
h1 {
    color: green;
    font-size: 2.5rem;
}
  
p {
    font-size: 1.25rem;
}
  
.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    max-width: 600px;
    min-width: 600px;
    margin: 6rem auto 0 auto;
}
  
.vertical-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    border-top: 2px solid black;
    padding-right: 3rem;
    color: green;
    font-weight: bold;
}
  
.items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-left: -5.8rem;
    margin-top: -3rem;
}
  
.items p {
    padding-left: 5rem;
}

索引.html



  

    
    
  
    
    

  

    GeeksforGeeks
    
        
              
GeeksforGeeks
  
        
        
            
                
                    GeeksforGeeks is a Computer Science
                    portal for geeks. It contains
                    well written, well thought 
                    and well explained computer 
                    science and programming articles.

输出：