Chrome Dev Tools / Firebug의 Less / Sass 디버깅

Chrome Dev Tools / Firebug의 Less / Sass 디버깅

---

Less / Sass로 구축 된 CSS에 대한 유지 관리는 어떻게합니까?

Dev Tools / Firebug에 대해 제가 좋아하는 것 중 하나는 CSS 스타일의 줄 번호를 볼 수있는 기능입니다. 수정하려는 코드를 찾기 위해 .less / .scss 파일을 수동으로 검색하는 것 외에 CSS 전처리기로이 작업을 수행하는 좋은 방법이 있습니까?

---

Chrome 개발자 도구는 이제 기본적으로 Sass 디버깅을 지원합니다.

소스 맵을 포함하도록 업데이트 됨 :
이전 버전에서는 CSS에서 인라인 주석을 사용하여 소스 코드에 대한 참조를 제공했습니다 (아래 방법 참조). 최신 버전의 sass (3.3+) 및 chrome (31+)은이를 위해 소스 맵을 사용합니다.

1. Sass 3.3.x가 있는지 확인하십시오.
2. --sourcemap플래그로 Sass를 컴파일하십시오 .
3. Chrome / ium DevTools에서 설정을 열고 일반을 클릭합니다.
4. "CSS 소스 맵 사용"을 켭니다.

자세한 정보는 Chrome 개발 도구 블로그 ( https://developers.google.com/chrome-developer-tools/docs/css-preprocessors)에서 확인할 수 있습니다.

이전 버전 :
1. 먼저 Sass를 --debug-info켜고 컴파일해야합니다 .
2. Chrome / ium에서 about : flags로 이동합니다.
3. 개발자 도구 실험을 활성화합니다
. 4. 검사기 (F12)에서 "설정"을 열고 "실험"탭으로 이동하여 "SASS 지원"을 선택합니다.

---

어떤 것을 사용해야하는지 선택하는 경우 css-tricks에 대한이 기사 가 흥미로울 수 있습니다.

LESS 또는 SASS를 사용하면 단점보다 장점이 더 많다는 것을 경험하게되었습니다. 이것이 확실히 단점이기는하지만 파일을 잘 구조화하여 다른 참조를 사용하여 원하는 스타일을 쉽게 찾을 수 있도록 제안 할 수 있습니다. 다음과 같은 몇 가지 작업을 수행 할 수 있습니다.

• 스타일 시트의 영역을 문서화하십시오. 즉 /* General */, /* Header */그리고/* Footer */
• 빠르게 인식 할 수있는 클래스에 논리적이고 합리적인 이름을 사용합니다 (오류 1-error10 등의 번호를 지정하지 마십시오).
• 클래스 / 요소 / ID 선택자를 분석하는 방법을 배우고이를 어떻게 / 어디에 작성했는지 생각해보십시오.
• CTRL+를 사용합니다 F. 종종 정확한 속성이나 그 근처의 속성은 이런 식으로 쉽게 찾을 수 있습니다.

SASS

이제 firebug inspector에서 sass 파일을 읽고 표시하는 확장을 사용하여 firefox에서 SASS를 디버깅하는 방법이 있습니다. 사용하려면 확장을 설치하고 각 디버그 플래그를 활성화하십시오.

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

편집 : 2014-07-06부터이 플러그인은 더 이상 다운로드 할 수 없습니다. FireSass는 중단되었습니다.

Chrome / Webkit 버전이 인터넷에 등장했으며 SASS 디버깅에 대한 지원을 추가하는 베타 기능이 크롬에 있습니다. 파이어 폭스 버전에서 사용 된 것과 동일한 디버깅 정보를 기반으로합니다. 아직까지는 제대로 판단 할 수 없었고,이 글을 쓰는 시점에서 작업의 플러그인으로 공개적으로 받아 들여진 것을 발견하지 못했습니다.

덜 / 스타일러스

@jaketrent 트윗이 설명 하듯 이 , 크롬에서 디버깅 측면에서 진행 상황이 있지만 아직 구워진 것이 없으며 LESS github의 상태를 고려할 때 여전히 시간이 걸릴 수 있습니다. 두 솔루션 모두에 대한 베타 기능을 기반으로합니다. 크롬에서 SASS 디버깅 지원, 기본적으로 SASS와 동일한 디버그 정보 추가.

• https://github.com/cloudhead/less.js/pull/1038
• https://github.com/LearnBoost/stylus/pull/886

---

나는 LESS에서 유지 보수 / 디버깅에 거의 문제가 없습니다. 우리는 항상 서버 측에서 컴파일하고 HTML 페이지의 CSS 파일 만 참조합니다. 따라서 웹 페이지 및 디스크의 파일과 항상 일대일 대응이 가능합니다.

그런 다음 LESS 파일을 편집해야 할 때 CSS + 추가 마크 업이 거의 많기 때문에 CSS의 원래 명령문에 대해 혼란스러워하는 모든 것을 역 추적하는 것이 매우 쉽습니다. 믹스 인이라면 꽤 분명합니다 (일반적으로 모든 벤더 접두사 작업을 반복적으로 수행 할 필요가 없도록 믹스 인을 사용하기 때문에), 클래스 중첩 기능을 사용하기 때문에 논리적 계층 구조이므로 다음을 찾습니다.

div#awesome aside ul

찾기만큼 쉽습니다.

div#awesome{
    aside{
        ul{
            padding: 0;
        }
    }
}

(우리는 3 층 이상 깊이 들어 가지 않으려 고 노력하지만)

SASS에 대한 실제 경험은 없지만 몇 년 전에 처음 보았을 때 CSS에서 얼마나 멀리 떨어져 있는지가 마음에 들지 않았습니다 (그 이후로 돌아 오지 않았습니다 ...).

---

몇 가지 팁 :

• 버전 제어에 .sass 및 .css 파일을 모두 포함합니다. 이렇게하면 모든 사람이 최신 변경 사항을 갖게됩니다.
• If you organize your stylesheets into logical areas, maintenance is a breeze.
• Also: try to use fewer than three main colors, and then use SASS color functions to modify them and store results in variables that you can reuse throughout your design/theme.

Ex: $chartreuse: #7fff00 $olive: darken($chartreuse, 32%)

That way, you only have to maintain one color. And the rest will be recalculated.

---

Until recently, there were no in-browser SASS debugging tools.

There is now a Firefox plugin called FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)

In your sass --watch command, add a -g for --debug-info so that it will output the hooks needed for the plugin to run.

---

I switched from less to sass, because of firesass. With this you get the original sass line in firebug.

install firesass if you use sass

참고URL : https://stackoverflow.com/questions/9865302/less-sass-debugging-in-chrome-dev-tools-firebug