linux, sass

리눅스 추가 명령어

• alias : alias ls = 'ls -a'등 축어 지정 unalias ls 로 해제
• man : 메뉴얼
• nslookup: 도메인 명령으로 IP 조회
• ping : 접속 테스트
• traceroute : 추적 명령어
• fg,bg : 프로세스를 백그라운드나 포그라운드로 옮김
• jobs : 프로세스 작업 출력
• ifconfig : 네트워크 정보 출력
• htop : 모니터링
• head file.py : 파일의 위에서부터 10줄 출력
• head -3 file.py : 위에서부터 3줄표시
• tali file.py : 아래에서부터 10줄 출력
• -F head와 tail에 추가하면 꺼지지않고 실시간 갱신

Sass

Sass란?

1. CSS로 컴파일 되는 시타일 시트 확장 언어, CSS 전처리기 중 하나
2. Sass 작성 후 CSS로 익스포트하여 사용한다.
3. Sass와 Scss 두가지 방식이 있다. 중괄호 사용의 차이 Scss를 사용하는게 편할것 같다.

Sass를 왜쓸까?

1. 스타일시트가 커지면 유지보수가 어려워진다.
2. sass에는 css에 없는 편의 기능이 많아 시간을 절약할 수 있다.
3. 코드의 재사용이 쉬워진다.

중첩

nav {
	background : #C39BD3;
	padding : 10px;
	height: 50px;
	ul {
		display: flex;
		list-style : none;
		justify-content: flex-end;
		li {
			color: white;
			margin-right: 10px;
		} 
	}
}

• 자식요소를 부모안에 넣어 코드 중복을 최소화 할 수 있다.
• 계층이 보이게 구조화되어 가독성이 높아진다.

속성 Nesting

//Scss
.add-icon {
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}

• 원래 background-image, background-position 등을 사용해야하지만 Nesting을 하여 간편하게 적을 수 있다.

/*CSS export*/
.add-icon {
  background-image: url("./assets/arrow-right-solid.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

ampersand

&사용하여 부모선택자를 가리킬 수 있다. 2가지 방법에 사용할 수 있다.

1. 가상요소, 가상클래스 등에 사용

//Scss
.box {
	&:focus{} // 가상선택자
	&:hover{}
  &:active{}
	&:first-child{} 
  &:nth-child(2){}
	&::after{} // 가상요소
	&::before{} 
}
/*CSS*/
.box:focus{} /* 가상선택자 */
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{} /* 가상요소 */
.box::before{}

2.공동 클래스명을 가진 선택자 중첩

//Scss
.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}

/*css*/
.box-yellow {
  background: #ff6347;
}
.box-red {
  background: #ffd700;
}
.box-green {
  background: #9acd32;
}

//Scss
.article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  .article-content {
    font-size: 14px;
    opacity: 0.7;
    @at-root i {
      opacity: 0.5;
    }
  }
}

/*CSS*/
.article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.article .article-content {
  font-size: 14px;
  opacity: 0.7;
}
/*중첩을 빠져나온 것을 확인할 수 있다.*/
i { 
  opacity: 0.5;
}

@at-root

• 과도한 중첩은 가독성과 유지보수 면에서 좋지 않다
• @at-root 키워드를 이용하여 중첩에서 벗어날 수 있다.

변수 생성

• $ 키워드를 이용하여 변수를 만들고 사용할 수 있다.
• 변수의 선언

$bgColor : #FFF;

• 변수의 사용

div{
 background: $bgColor;
}

• 변수 타입 : number, string, color, booleans, null, lists, maps 등
• lists : 여러가지를 한 변수에 적용할 수 있으며 인덱스처럼 사용 가능하다. 인덱스는 0이아닌 1부터 시작

//sass 공식문서
$font-size : 10px 12px 16px; //폰트사이즈 리스트
$image-file : photo_01, photo_02, photo_03 //이미지 파일명 리스트

//아래와 같은 형태로 사용(순회도 가능) - ruby sass
nth(10px 12px 16px, 2); // 12px
nth([line1, line2, line3], -1); // line3

• maps : key와 벨류를 지정해두고 사용 가능

//sass 공식문서
$font-weights: ("regular": 400, "medium": 500, "bold": 700); //글자 굵기 리스트

//아래와 같은 형태로 사용 - ruby sass
map-get($font-weights, "medium"); // 500
map-get($font-weights, "extra-bold"); // null

lists , maps 내장함수

lists

• append(list,value,[separator]), index(list,value), nth(list, n) 등이 있다.
• append(list,value,[separator]) : lists의 값을 추가하는 함수
• index(list,value) : lists의 값에 대한 인덱스를 리턴하는 함수
• nth(list, n) : lists의 인덱스에 해당하는 값을 리턴하는 함수

maps

• map-get(map,key), map-keys(map), map-values(map) 등이 있다.
• map-get(map,key) : 키에 해당하는 값을 값을 리턴하는 함수
• map-keys(map) : map에 들어있는 키(key) 전부를 리턴하는 함수
• map-values(map) : map에 들어있는 값(value) 전부를 리턴하는 함수