Sass && 반응형

• 지난 번에 less를 했던 경험이 있어서, Sass 개념을 이해하는 데는 어렵지 않았다.

• Sass 강좌 – 한 눈에 보기과 13 Must-have SASS Mixins for Web Designers 같은 걸 참고해서 primary color나 clearfix 를 만들어서 활용했다. 좀 더 멋있게 써보고 싶은데, 그건 좀 더 공부를 해봐야겠다.

• 문제는 반응형이었는데, less에선 아래처럼 하면 잘 됐었다.

@max-point: ~"only screen and (min-width: 1700px)";
@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1699px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";
@mid-point:    ~"only screen and (min-width: 480px) and (max-width: 719px)";
@mobile:    ~"only screen and (min-width: 320px) and (max-width: 479px)";
@min-point:    ~"only screen and (max-width: 319px)";

.container {
    margin: 0 auto;
    @media @max-point {
        width: 40vw;
    }
    @media @desktop {
        width: 50vw;
    }
    @media @tablet {
        width: 80vw;
    }
    @media @mid-point {
        width: 85vw;
    }
    @media @mobile {
        width: 90vw;
    }
    @media @min-point {
        width: 319px;
    }
    &-header {
        height: 5rem;
    }
}

• 근데 비슷한 원리로 했는데 sass에서는 왜 안 먹힐까…

• 다 찾아서 해봤는데, 내가 원하는대로 max-width가 먹질 않는다.. 이것때문에 한 3시간 막 해보다가, 아 이렇게 그냥 닥치는대로 해서는 변화가 없을 것 같아서 issue로 올려놓고 다른 기능부터 구현해보기로 했다.

완벽한 이해보다는 어제보다 오늘 하나 더 배우고 익혔다는 생각으로 차근차근 수련하다보면 어느 순간 그림이 그려지는 날이 올거예요.