vscode 사스(SCSS) 설정 방법 > CSS
CSS

vscode 사스(SCSS) 설정 방법

조회 188회 댓글 0건

제목에 있듯이 여기서 SCSS 설정에 대한것은 VSCODE 프로그램을 사용한다는 것을 기반으로 합니다.


1) 먼저 아래 확장 프로그램을 설치 합니다.

   Live Sass Compiler v3.0.0

   Sass Lint (deprecated)


f08f4a3d7c3248096854e2720bc04fa9_1671327571_4491.png
 

2) 아래는 setting.json 에서 SCSS 부분에 해당 하는 부분만 발췌한 것입니다.

    

    "liveSassCompile.settings.generateMap": false,

    "liveSassCompile.settings.formats":[

      {

        "format": "expanded",

        "extensionName": ".css",

        "savePath": "~/../css/"

      },

      {

        "format": "compressed",

        "extensionName": ".min.css",

        "savePath": "~/../css/"

      }

    ],

    // "liveSassCompile.settings.includeItems": [

    //   "scss/main.scss"

    // ],

    "scss.hover.references": false,

    "less.hover.references": false,

    "liveSassCompile.settings.excludeList": [

        "**/node_modules/**",

        ".vscode/**"

    ],

    "editor.guides.indentation": true,

    "liveSassCompile.settings.includeItems": [

    ],


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 12건 1 페이지
  • profile_image 반응형으로 만들기 좋은 부트스트랩에 관한 툴이 있는 사이트입니다.가끔씩 사용할때 레이아웃이 생각나지 않은 경우 이용하면 좋습니다.지원하는 버전은 현재 버전보다 낮은 4버전 이긴 하지만 기본적인것은 동일하기 때문에 사용하는데는 큰 문제는 없습니다. * 찾을 때 검색한 키워드bootstrap design toolbootstrap builder* 부트스트랩 레이아웃 관련된 사이트 https://www.bootstrapcdn.com/https://bo…
  • profile_image 현재 페이지에서 표현이 되고 있는 스타일을 간단하게 자바스크립트로 볼 수 있는 방법입니다.const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])위에대한 설명입니다.window.getComputedStyle(document.body) - HTML BODY에 대한 모든 스타일을 얻으려면getPropertyVa…
  • profile_image 글자색을 지정하는 방법에 대한 것입니다. font-color 같은것을 사용해도 되겠지만 가능하면 프레임워크 사용할때는 프레임워크에서 지웒는것이 있는지 찾아본 다음 있으면 그것을 사용하는것이 좋기 때문입니다.텍스트 컬러에 대한 표준적인 형태로 잘 정리된 표 입니다.
  • profile_image 일반적으로 제목이 길면 2줄로 나오게 됩니다. 너무 긴 경우 더 나올수도 있겠지요.그런 경우 백엔드에서 잘라서 보여주기도 하곤 합니다.이런 경우 css 처리 방법에선 hidden을 주면 됩니다.부트스트랩에선 overflow-hidden 클래스만 추가해주면 기본적인 길이에서 넘치게 되면 보이지 않게 처리를 합니다.높이게 대한것과 길이에 대한 부분은 필요하면 style 속성을 추가해서 해주면 됩니다.a 태그도 필요하면 style 줘서 높이와 길이 …
  • profile_image 부트스트랩 배지(badge) 패딩 주기 입니다.기본은 너무 바짝 붙어서 패딩을 주었으면 하는데 위 이미지 참고 하면 됩니다.마진과 패딩 가끔 사용하다 보니 얼마나 헷갈리는지... 패딩은 겨울옷 패딩을 생각하면 되고 마진은 밖에서 남겨 먹는거라~
  • profile_image 다음에 찾을때 필요할듯 하여 올림.!!반응형을 처리 하는 방식에 대한 이름(명칭) 입니다. 화면의 크기와 더불어 요즘은 해상도가 커지면서 글자 크기에대 한 부분도 같이 신경써야 합니다. squish, scroll, collapse rows, collapse columns 방식의 반응형 모델 입니다.
  • profile_image 버튼을 클릭하면 아작스를 통해서 서버로 보낸다음 버튼의 색을 변경하고 명칭도 변경하여 목록으로 이동 할 수 있게 하는 기능을 만들다 보니 이런것이 필요하게 되었습니다.처음의 버튼은 '글 삭제하기'였습니다.그리고 클릭하여 정상적으로 삭제가 되면 메시지를 하나 보여주고 '정상적으로 삭제 되었습니다.' 그리곤 아래의 jquery 명령으로 버튼를 변경해 줍니다.  - 버튼의 명칭을 변경합니다.  - onclick 특성을 줘서 클릭하면 주소를 이동합니다…