.scss, media quires, @content 및 bourbon 깔끔함

저는 Bourbon Neat을 사용하고 있습니다.하지만 컴파일 된 CSS가 각 요소에 대한 미디어 쿼리를 반복하지 않고 먼저 모바일 순서로 컴파일해야합니다..scss, media quires, @content 및 bourbon 깔끔함

내 SCS들 내가 청소기 CSS를 컴파일 체계화 된 달성 할 수있는 방법이

#logo { 
     @include span-columns(3); 
     @include media($mobile) { 
      @include span-columns(2); 
      } 

    } 

    nav { 
     @include span-columns(6); 
     text-align: center; 
     li { 
      display: inline-block; 
      } 
      @include media($mobile) { 
       @include span-columns(2); 
       text-align: right; 
       } 
    } 

    #social { 
     @include span-columns(3); 
     text-align: right; 
     li { 
      display: inline-block; 
      } 

     @include media($mobile) { 
      display:none; 
      } 

}

같이 보입니다? 나는 상단에 이렇게하여 @content 기술을 사용하여 시도했다

#logo { 
    display: block; 
    float: left; 
    margin-right: 2.35765%; 
    width: 23.23176%; } 
    #logo:last-child { 
    margin-right: 0; } 
    @media screen and (max-width: 480px) { 
    #logo { 
     display: block; 
     float: left; 
     margin-right: 7.42297%; 
     width: 46.28851%; } 
     #logo:last-child { 
     margin-right: 0; } } 

nav { 
    display: block; 
    float: left; 
    margin-right: 2.35765%; 
    width: 48.82117%; 
    text-align: center; } 
    nav:last-child { 
    margin-right: 0; } 
    nav li { 
    display: inline-block; } 
    @media screen and (max-width: 480px) { 
    nav { 
     display: block; 
     float: left; 
     margin-right: 7.42297%; 
     width: 46.28851%; 
     text-align: right; } 
     nav:last-child { 
     margin-right: 0; } } 

#social { 
    display: block; 
    float: left; 
    margin-right: 2.35765%; 
    width: 23.23176%; 
    text-align: right; } 
    #social:last-child { 
    margin-right: 0; } 
    #social li { 
    display: inline-block; } 
    @media screen and (max-width: 480px) { 
    #social { 
     display: none; } }

$mobile: new-breakpoint(max-width 480px 4); 

@mixin breakpoint($point) { 
    @if $point == small { 
    @include media($mobile) { @content; } 
    }

그리고이에 @include을 변경 여기

내가 지금 무엇을 얻을 수 있습니다 :

#logo { 
    @include span-columns(3); 
    @include breakpoint(small) { 
     @include span-columns(2); 
     } 

}

어떤 도움을 주시면 감사하겠습니다 :)

출처

2013-08-29 user1910388

가능한 중복 http://stackoverflow.com/ : http://adamkaplan.me/grid/

예 깔끔한 부르봉 왕가를 사용하여 :

현재 모바일 첫번째에 대한 자세한 내용을보실 수 있습니다 질문/17619493/sass-place-holder-for-media-query) – cimmanon

참고 :'css' 규칙은'css' 파일에있는 순서대로 적용됩니다. 컴파일러는'scss'에서'css'로 변환 할 때이 순서를 유지할 것입니다. 왜냐하면'html' 코드를 모르면 규칙을 움직여서 문서의 스타일을 바꿀 수 없기 때문입니다. –

@cimmanon 미디어 쿼리를 위해 SASS 자리 표시자를 보여 주셔서 감사합니다. 그래서 내가 그것을 이해할 때 .scss를 사용할 때 모바일 첫 번째 CSS와 같은 것은 없다? 각 요소 또는 클래스/ID 아래에 중복 된 미디어 쿼리가 나타날 때까지 CSS를 아래로 계단식으로 넣을 수 있습니까? – user1910388

모바일 먼저 코드를 작성하려면 모바일 장치 용 표준 스타일을 만든 다음 미디어 쿼리를 사용하여 더 큰 화면에서 디자인을 확장해야합니다. max-width 대신 min-width 태그를 사용하고 필요한 경우에만 레이아웃 관련 규칙을 도입하십시오.

ul.navigation-list { 
    display:none; 
     @include media($large-screen) { 
      display:block; 
     } 
    }

[? 미디어 쿼리에 대한 SASS 자리 표시 자] (의

출처

2015-05-25 01:17:59

.scss, media quires, @content 및 bourbon 깔끔함

답변

관련 문제