SASS Tutorial의 함수
그들은 CSS 코드 작성에 프로그래밍 요소를 추가하고 이제 우리는 수학을 할 수 있습니다!
표준 수학 연산자
+ , - , * , / 및 % 를 모두 사용할 수 있습니다.예제 함수
다음 함수는
$first-number 및 $second-number 두 개의 인수를 허용할 수 있습니다. 함수가 반환하는 값은 두 변수의 합입니다.@function add-numbers($first-number, $second-number) {
@return $first-number + $second-number
}
padding 속성의 값을 두 개의 개별 값의 합으로 바꾸고 싶다고 가정해 보겠습니다.다음과 같이 함수를 호출하고 인수를 전달합니다.
.box1 {
padding: add-numbers(5px, 10px);
}
결과 CSS 출력은 다음과 같습니다.
.box1 {
padding: 15px;
}
전체 코드를 보자:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<nav class="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
그리고 우리의 SASS:
@function add-numbers($first-number, $second-number) {
@return $first-number + $second-number
}
.navbar {
background-color: red;
padding: add-numbers(5px, 100px);
ul {
list-style: none;
}
li {
text-align: center;
margin: 1rem;
}
}
보시다시피 함수는 재사용 가능한 로직을 매우 효율적인 방식으로 활용할 수 있으므로 더 읽기 쉽고 DRY Sass를 작성하는 데 도움이 됩니다. 이것은 더 크고 복잡한 프로젝트 작업을 시작할 때 큰 차이를 만들 수 있습니다!
결론
이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here🌎 연결하자
Reference
이 문제에 관하여(SASS Tutorial의 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rembertdesigns/functions-in-sass-tutorial-hli텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
