Databases
StackOverflow2013
Postsdbo
POCSS pre-processor with a possibility to define variables in a @media query
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS pre-processor with a possibility to define variables in a @media query
    primarykey
    data
    text
    <p>Currently, I am using LESS as my main CSS pre-processor. I have (and I am sure a lot of people have this need) to define variables in a <code>@media</code> query like:</p> <pre><code>@media screen and (max-width: 479px) { myVar: 10px; } @media screen and (min-width: 480px) and (max-width: 767px) { myVar: 20px; } @media screen and (min-width: 768px) { myVar: 30px; } .myElement { padding: @myVar; } </code></pre> <p>This doesn't work in LESS, because of the compiling nature (<code>@myVar</code> is defined within a scope of each particular <code>@media</code> only, but not globally). Even if I define <code>@myVar</code> globally before the media queries, it is not updated in accordance to the media queries and <code>.myElement</code> gets that initial value no matter what.</p> <p>So, the question is, is it possible to achieve this in any other CSS pre-processor, or we are doomed to override the <code>.myElement</code> within each media query? Not a problem in this simplest example, but in real projects this could save a lot of time and copy/pasting.</p> <p><strong>EDIT:</strong> Not a solution, but a <strong>workaround</strong> for my particular project:</p> <ol> <li>Set font-size on <code>&lt;html&gt;</code> to base font-size</li> <li><code>myVar</code> LESS variable is defined in <a href="http://www.w3.org/TR/css3-values/#font-relative-lengths"><code>rem</code></a> instead of <code>px</code> as a derivative of the base font-size</li> <li>Use <code>@media</code> queries to adjust base font-size for different media.</li> <li><strong>OPTIONAL</strong> Use <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM unit polyfill</a> for browsers, that don't yet support <code>rem</code> (<a href="http://caniuse.com/#search=rem">http://caniuse.com/#search=rem</a>). This will not work in IE 8 and below, but not because of lack of support for <code>rem</code> – <a href="http://caniuse.com/#feat=css-mediaqueries">it doesn't support media queries</a>. So IE8 and below get full-size media-queries-free stylesheet anyway.</li> </ol> <p>Code snippet:</p> <pre><code>@myVar: .77rem; // roughly 10px, 20px and 30px respectively html { font-size: 13px } @media screen and (min-width: 480px) and (max-width: 767px) { html { font-size: 26px } } @media screen and (min-width: 768px) { html { font-size: 39px } } .myElement { padding: @myVar; } </code></pre> <p>Here is a <a href="http://jsbin.com/avigot/11/edit">JSBin</a> with more extensive example that mixes different font-size elements with differently measured blocks.</p> <p>Easy and flexible for my needs. Hopefully will be helpful for somebody else.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USspliter
    1. USspliter
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS pre-processor with a possibility to define variables in a @media query
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POCSS pre-processor with a possibility to define variables in a @media query
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCSS pre-processor with a possibility to define variables in a @media query
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI don't thinks this is possible inany CSS compiler. The compiler had to generate `@media ... { .myElement { padding: ... } } ` for you. Even though this is quite possible, this would defy control from you. Why don't you just include `.myElement {...}` within your `@media ... { ... }` queries or use mixins (to reduce duplication) which you import within them?.
      singulars
      1. POCSS pre-processor with a possibility to define variables in a @media query
      1. UStry-catch-finally
    2. CO@try-catch-finally, the problem with repetition is maintenance. If I have quite a few media queries and even more elements, depending on media-query-dependent variables, this is going to be a maintenance nightmare.
      singulars
      1. POCSS pre-processor with a possibility to define variables in a @media query
      1. USspliter
    3. COIf this is an example of the type of things you're doing with media queries, you're the one causing the maintenance nightmare. Different px values for your paddings depending on your browser's width? Use a percentage instead.
      singulars
      1. POCSS pre-processor with a possibility to define variables in a @media query
      1. UScimmanon
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload