Databases
StackOverflow2013
Postsdbo
POImporting & Extending raw CSS?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImporting & Extending raw CSS?
    primarykey
    data
    text
    <p>I have a preprocessor import problem. I have vendor css that i would like to copy functionality. Unfortunately, <em>i don't control the html</em> for this situation either.. so essentially i have vendor css &amp; different vendor html, and i am trying to extend functionality of one css rule into another.</p> <p>Now, the basic concept in many css preprocessors is to extend the rule.</p> <pre><code>// Vendor .foo { font-weight: bold; } .bar { text-color: red; } // Mine .bar { .foo } </code></pre> <p>In the above example, you don't have access to <code>.foo</code> or <code>.bar</code>, but with preprocessors, you can extend functionality from <code>.foo</code> into <code>.bar</code>, which works great for less/stylus/etc. The problem, is when the vendor rules are only defined in raw css.</p> <p>So with that said, the most obvious solution is to have Stylus/Less import the raw css as stylus/less. However, neither seem to be able to actually do this.. that i've found at least. Less doesn't seem able to <em>(<code>@import "foo.css"</code> directives are ignored)</em> and while Stylus has an option to actually include the imported raw CSS, it did not seem to actually be processing it. That is to say, it would include the css, but <code>@extend</code> directives failed <em>(perhaps i am wrong?)</em>.</p> <p>The other option i could think of is simply renaming the .css files to the preprocessor language extension. Since we want to keep the vendor stuff out of our hands, allowing for proper versioning/etc, This involves a build process which copies the target css files and renames them into the target language extension, but this is error prone. Stylus ran into syntax errors immediately, and Less could just as easily <em>(as not all CSS is valid Less. most is, but not all)</em>.</p> <p>So.. any additional thoughts on this front? Hopefully there is an option i may be missing? Perhaps SCSS handles this better?</p> <p>Currently, with what i have found is/isn't possible.. i feel the only <em>stable</em> way is to simply copy the raw css bits into my css code. If the vendor code changes, i'll have to update manually, but at least i don't run the risk of vendor stuff changing and all of a sudden the build process fails, because vendor introduced some CSS syntax not supported by less/etc. It is far from good.. but the worst that can happen is my css looks funny, and i need to update.</p> <p><strong>edit</strong>:</p> <p>I'm going to try SCSS next.. we'll see how it goes. On the site, they claim all CSS(3 only?) syntax is valid SCSS</p> <p><strong>edit2:</strong> For clarity. My question is, give the above scenario, what would <em>you</em> do? Importing the .css files is not possible <strong>(See note below!)</strong>, and renaming .css files to .less/.stylus can in turn be error prone, since less is not a perfect superset of CSS(namely due to proprietary features).</p> <p><strong>!Note!</strong>: I have since been digging around the less source to see what could be done to fix this problem, rather than work around it, and ran into a dozen support tickets on the matter. The main discussion of which seems to be taking place on <a href="https://github.com/cloudhead/less.js/issues/1185" rel="nofollow">#issue 1185</a>, and more importantly, check out the changelog which *(i believe) addresses this issue! <a href="https://github.com/cloudhead/less.js/blob/master/CHANGELOG.md" rel="nofollow">CHANGELOG 1.4.0 Beta</a></p> <p>So with that said, the <code>@import (less) "file.css"</code> is likely the winning scenario here, even if it may have a few bugs due to the beta status. Yay :)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLee Olayvar
    1. USLee Olayvar
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. POImporting & Extending raw CSS?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POImporting & Extending raw CSS?
      1. USjonschlinkert
      1. VTFavorite
    1. COIs there a question here?
      singulars
      1. POImporting & Extending raw CSS?
      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