웹언어/SASS (10) 썸네일형 리스트형 [SASS강좌] 10강 SASS의 @for - 반복관련 - 오쌤의 니가스터디 1. @for - @for 키워드는 스타일을 반복적으로 출력하는데 사용합니다. - JS의 for문과 유사합니다. 1) @for문법 ## 문법1 // through // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } - 변수는 JS처럼 관례상 $i를 사용합니다. ## 문법2 // to // 종료 직전까지 반복 @for $변수 from 시작 to 종료 { // 반복 내용 } - 변수는 JS처럼 관례상 $i를 사용합니다. 2) #{ } - #{ } 를 통해서 코드의 어디든지 변수 값을 넣을 수 있습니다. ## test.scss $img: unquote("test01.jpg"); h1{ background-image: url(images/#{$img}); } - 위에서.. [SASS] 9강 SASS의 if와 @if - OSSAM강좌 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://youtu.be/ZaAYOmeAFOY 1. if 문법 - 조건에 따른 결과를 true/false로 나눠서 처리하는 삼항연산자와 비슷한 문법입니다. 1) 문법 if(조건식,참표현식,거짓표현식); - 조건식이 true면 참표현식을 반환, false면 거짓표현식을 반환합니다. 2) 기본 예제 ## HTML코드 - div 요소가 두개 있다고 가정해보겠습니다. ## SCSS코드 div{ height: 50px; border: 3px solid black; margin-bottom: 20px; } $width1: 600px; $width2: 300px; .box01{ width: $width1; background-color: if($width1 >.. [SASS] 8강 SASS의 @function - OSSAM강좌 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://youtu.be/0x_OI9twdRs 1. @function 문법 - 사용자가 함수를 직접 정의하여 사용할 수 있습니다. - @mixin과 비슷해보이지만 반환되는 내용이 다릅니다. - @mixin은 지정한 스타일을 반환하지만 @function(함수)는 연산된 값을 @return키워드로 반환합니다. 1) 문법 ## 선언 문법 @mixin 믹스인명($매개변수){ 스타일 } ============================================================== @function 함수명($매개변수){ @return 값; } ## 호출문법 /* @mixin 호출 */ @include 믹스인이름(인수); ===========.. [SASS] 7강 SASS의 @extend - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/O1U3zkEzOvk 1. @extend문법 - 특정선택자가 다른 선택자의 모든 스타일을 가져야하는 경우 사용합니다. - 선택자의 확장 기능이라고 볼 수 있습니다. @extend 선택자 1) 기본 예제 ## HTML코드 일반버튼 전송버튼 초기화버튼 - 일반버튼과 전송버튼과 초기화버튼 이렇게 세개를 작성해보도록 하겠습니다. ## SASS코드 .button-basic { border: none; padding: 15px 30px; text-align: center; font-size: 16px; cursor: pointer; } .button-submit{ @extend .button-basic; background-co.. [SASS] 6강 SASS의 @mixin과 @include - OSSAM강좌 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://youtu.be/J2xSVTEyI0I 1. @mixin문법 - 웹사이트전체에 재사용할 CSS코드 정의하는 지시문 @mixin mixin명 { //재사용할 스타일 속성 지정 } 2. @include문법 - @mixin을 선택자에 포함하는데 사용하는 지시문 선택자{ @include mixin명; } 3. @mixin과 @include를 이용한 기본 구문 1) 예시 - h3태그를 이용한 타이틀이 존재하고 다른 값은 모두 동일하고 글자색만 다르다고 가정해보자. ** HTML코드 전시 공지사항 ** SCSS코드 @mixin h3Text{ font-family: “Noto Sans kr”; font-size: 28px; font-weight: 700.. [SASS] 5강 SASS의 @import - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/T8Dq_GJ7IPU 1. 사스파일 가져오기 - SASS도 CSS처럼 @import구문을 지원, 다른 SASS파일을 불러온다. - CSS는 @import를 사용할 때마다 HTTP요청을 추가해서 작업하지만 SASS는 CSS로 바로 처리하기 때문에 HTTP호출이 필요하지 않다. 1) 구문 @import 파일명; - TIP : 파일 확장자를 지정할 필요가 없다. SASS에서는 당연히 파일명.scss를 가져온다고 가정하기 때문이다. css파일을 가져오고 싶은 경우는 확장자를 지정하면 된다. 2) 예시 - D드라이브에 [sassTest]폴더에 [test.scss]와 [test.css]를 만들었다고 가정 - [var.scss]도.. [SASS] 4강 SASS의 중첩규칙과 속성 ** 영상으로 보실분은 아래 주소를 클릭해주세요! https://youtu.be/9c59Mhr2Zu0 ** CSS를 풀어서 보기위해 앞으로 스타일은 expanded를 사용 sass --watch scss파일명:css파일명 --style expanded --sourcemap=none ** D드라이브에 [sassTest]폴더에 [test.scss]와 [test.css]를 만들었다고 가정 sass --watch test.scss:test.css --style expanded --sourcemap=none ** 위의 방법들은 [VS CODE]의 [LIVE SASS COMPILER]를 사용하면 위 작업은 하지 않아도 된다. 1. CSS 선택자를 중첩하여 작성 - 태그가 자손 혹은 후손인 경우 { } 코드블록으로 .. [SASS] 3강 SASS의 CSS작성스타일 설정 1. 기본 watch를 써서 CSS로 변환하는 경우 코드 기록 - SASS로 스타일을 변환시 평소 적던 CSS처럼 적혀지지 않아서 코드가 지저분해질 수 있다. - 코드를 추가하여 CSS코드를 깔끔하게 정리해보자 2. SASS의 CSS기록 스타일 변환 코드 sass --watch scss파일명:css파일명 --style 스타일종류 - 종류는 nested, expanded, compact, compressed 이렇게 4가지 방법이 있다. 1) nested - 문법 sass --watch scss파일명:css파일명 --style nested - cmd에서의 코드 sass --watch test.scss:test.css --style nested - test.css 코드 - 기본값과 같이 처리됨 h1 { col.. 이전 1 2 다음
