sass中循环结构

最新推荐文章于 2022-09-04 16:27:04 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2022-09-04 16:27:04 发布

阅读量526

点赞数 1

分类专栏： SASS

本文链接：https://blog.csdn.net/qq_37805832/article/details/108091551

版权

SASS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*ul
		{
			li
			{
				width: 100%;
				height: 50px;
				border: 1px solid red;
				font-size: 20px;
				background: red;
				/*这下面是less的写法:
			&:nth-child(5)
			{
				background:yellow;
			}
			&:nth-child(6)
			{
				background:red;
			}
			&:nth-child(7)
			{
				background:blue;
			}
			&:nth-child(8)
			{
				background:black;
			}
			}
			}
			*/
		/*less编译后的css文件*/
		/*
		

ul li {
  width: 100%;
  height: 50px;
  border: 1px solid red;
  font-size: 20px;
  background: red;
}
ul li:nth-child(5) {
  background: yellow;
}
ul li:nth-child(6) {
  background: red;
}
ul li:nth-child(7) {
  background: blue;
}
ul li:nth-child(8) {
  background: black;
}

		 */
		
/*ul{
  li{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    font-size: 20px;
    color: #fff;
    background: red;
    @for $i from 5 through 8
    {
    	$i:5;
    	&:nth-child(#{$i})
    	{
    		background: red;
    	}
    	$i:$i+1;
    }
}}*/
/*编译后的css文件*/
/*

ul li {
  width: 100%;
  height: 50px;
  border: 1px solid #000;
  font-size: 20px;
  color: #fff;
  background: red;
}
ul li:nth-child(5) {
  background: red;
}
ul li:nth-child(5) {
  background: red;
}
ul li:nth-child(5) {
  background: red;
}
ul li:nth-child(5) {
  background: red;
}

 */
/*ul{
  li{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    font-size: 20px;
    color: #fff;
    background: red;
    @for $i from 5 to 8
    {
    	$i:5;
    	&:nth-child(#{$i})
    	{
    		background: red;
    	}
    	$i:$i+1;
    }
}}*/
/*编译后的css文件*/
/*
ul li {
  width: 100%;
  height: 50px;
  border: 1px solid #000;
  font-size: 20px;
  color: #fff;
  background: red;
}
ul li:nth-child(5) {
  background: red;
}
ul li:nth-child(5) {
  background: red;
}
ul li:nth-child(5) {
  background: red;
}

 */
/*ul{
  li{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    font-size: 20px;
    color: #fff;
    background: red;
    
    	$i:5;
    	@while($i<=8)
    	{
    	&:nth-child(#{$i})
    	{
    		background: red;
    	}
    	$i:$i+1;
    }
    }*/
    /*编译后的css文件*/
    /*ul li {
  width: 100%;
  height: 50px;
  border: 1px solid #000;
  font-size: 20px;
  color: #fff;
  background: red;
}
ul li:nth-child(5) {
  background: red;
}
ul li:nth-child(6) {
  background: red;
}
ul li:nth-child(7) {
  background: red;
}
ul li:nth-child(8) {
  background: red;
}*/
	</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<!--2.for循环
    @for $i from 起始整数 through 结束整数{}
    @for $i from 起始整数 to 结束整数{}
    两者的区别 through包头包尾, to包头不包尾

    3.while循环
    @while(条件语句){}
    */-->
</body>
</html>

贵哥的编程之路(热爱分享)

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
sass中循环结构

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*ul { li { width: 100%; height: 50px; border: 1px solid red; font-size: 20px; backgro
复制链接

扫一扫