**YES!** its possible.

If you want all `&lt;button&gt;` elements to inherit the `.btn` class from [Twitter Bootstrap&#39;s Default buttons][1]

In your `styles.scss` file you would have to first import `_bootstrap.scss`:

    @import &quot;_bootstrap.scss&quot;;

Then below the import:

    button { @extend .btn; }



  [1]: http://twitter.github.com/bootstrap/base-css.html#buttons

**I might be mistaken, but if I get what you&#39;re trying to do, can&#39;t you just use the `@extend .classname;` command inside the element that you&#39;d want to extend? Naturally, you should only modify your own code to preserve updatability.

To my knowledge, [you have to use `@import`][1] of the file containing the classes you want to use into your SASS file in order to utilize them in that file. However, I am not a SASS/SCSS expert, so someone may know of another way to remotely use them that I am not aware of.


  [1]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import

Just as the accepted answer has shown this is possible with @import, however @import has been [deprecated by sass][1] 

&gt; The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.

The @use rule is better suited for use now, since it does not pollute the scope of the importing (user) module. unfortunately at the time of writing the use rule is only implemented in Dart sass.
  
[1]: https://sass-lang.com/documentation/at-rules/import

What is the fastest way to check if a string matches a regular expression in Ruby?

My problem is that I have to &quot;egrep&quot; through a huge list of strings to find which are the ones that match a regexp that is given at runtime. **I only care about whether the string matches the regexp, not where it matches, nor what the content of the matching groups is.** I hope this assumption can be used to reduce the amount of time my code spend matching regexps.

I load the regexp with

    pattern = Regexp.new(ptx).freeze

I have found that `string =~ pattern` is slightly faster than `string.match(pattern)`.

Are there other tricks or shortcuts that can used to make this test even faster?

Fastest way to check if a string matches a regexp in ruby?

Will the below string contain the null terminator `&#39;\0&#39;`?

    std::string temp = &quot;hello whats up&quot;;



Does std::string have a null terminator?

The question pretty much says it all.

For instance, if I were using, say, [Twitter Bootstrap][1], could I define classes in my own SASS stylesheet that inherit from Bootstrap&#39;s CSS classes? Or does inheritance in SASS only work within the scope of a single file?

  [1]: http://twitter.github.com/bootstrap/

Is it possible in SASS to inherit from a class in another file?

<p>The question pretty much says it all.</p>
<p>For instance, if I were using, say, <a href="http://twitter.github.com/bootstrap/" target="_blank" rel="noopener noreferrer">Twitter Bootstrap</a>, could I define classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or does inheritance in SASS only work within the scope of a single file?</p>


I&#39;m trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like at the top of the page etc.. 

I want it to be both vertically and horizontally be centered. Here is what I have written right now:

    &lt;button type=&quot;button&quot; style=&quot;background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%&quot;&gt;
       mybuttonname
    &lt;/button&gt; 


trying to align html button at the center of the my page

I am designing a new website and I want it to be compatible with as much browsers and browser settings as possible. I am trying to decide what unit of measurement I should use for the sizes of my fonts and elements, but am unable to find a conclusive answer.

**My question is: should I use `px` or `rem` in my CSS?**

* So far I know that using `px` isn&#39;t compatible with users who adjust their base font size in their browser.
* I&#39;ve disregarded `em`s because they are more of a hassle to maintain, compared to `rem`s, as they cascade.
* Some say that `rem`s are resolution independent and therefore more desirable. But others say that most modern browsers zoom all elements equally anyway, so using `px` is not a problem.

I&#39;m asking this because there are a lot of different opinions as to what is the most desirable measure of distance in CSS, and I am not sure which is best.

Should I use px or rem value units in my CSS?

## My Question(s) ##

 1. Are any of these methods preferred by a professional web designer?

 2. Are any of these methods prefereed by a web browser when drawing the website?

 3. Is this all just personal preference?

 4. Are there other techniques I&#39;m missing?

*Note: Above questions are in regards to designing a multi-column layout*

----------


float:left;
----------

http://jsfiddle.net/CDe6a/

![float:left image][1]

This is the method I always use when creating column layouts, and it seems to work just fine. The parent does collapse on itself though, so you just need to remember to `clear:both;` afterwards. Another *con* that I just found was the inability to align text vertically.

display:inline;
---------------

This seems to correct the problem of the collapsing parent, but adds whitespace.

http://jsfiddle.net/CDe6a/1/

![display:inline image][2]

Removing whitespace from html seems to be the easiest fix this problem, but is not desired if you are really picky about your html.

http://jsfiddle.net/CDe6a/2/

![no html whitespace image][3]

display:inline-block;
---------------------

Seems to behave exactly like `display:inline;`.

http://jsfiddle.net/CDe6a/3/

![display:inline-block image][2]

display:table-cell;
-------------------

http://jsfiddle.net/CDe6a/4/

![display:table-cell image][4]

Works perfect.

My thoughts:
------------

I&#39;m sure I&#39;m missing a ton of stuff, like certain exceptions that will break the layout but, `display:table-cell;` seems to work the best, and I think I will start replacing `float:left;` as I always seem to mess up on `clear:both;`. I&#39;ve read many articles and blogs about this on the web, but none of them give me a definite answer on what I should use when laying out my website.


  [1]: http://i.stack.imgur.com/oIMvg.png
  [2]: http://i.stack.imgur.com/aDgsb.png
  [3]: http://i.stack.imgur.com/qgnlL.png
  [4]: http://i.stack.imgur.com/BPtXn.png

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

I&#39;m not using CSS3. So I can&#39;t use `opacity` or `filter` attributes. Without using these attributes how can I make the `background-color` transparent of a `div`? It should be kind of the text box example in this [link][1]. Here the text box background color is transparent. I want to make the same, but without using the above mentioned attributes.


  [1]: http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency

How to make div background color transparent in CSS

Usually, I&#39;m good with CSS, but I can&#39;t seem to figure this one out. If I have a structure of 

    &lt;div&gt;
        &lt;h2 class=&quot;open&quot;&gt;1&lt;/h2&gt;
        &lt;h2&gt;2&lt;/h2&gt;
        &lt;h2&gt;3&lt;/h2&gt;
        &lt;h2&gt;4&lt;/h2&gt;
        &lt;h2&gt;5&lt;/h2&gt;
    &lt;/div&gt;

how can I target all of the sibling h2s using the `.open` class with CSS? My main issue is that sibling selectors (`.open + h2`) will only target the h2 immediately following `.open`.

CSS sibling selectors (select all siblings)

I am asking a quite simple question, but I am bit confused in this.

Suppose I have a class `Parent`:

    public class Parent {
    
    	int name;
    }

And have another class `Child`:

    public class Child extends Parent{
    
    	int salary;
    }

And finally my Main.java class


    public class Main {
    
    	public static void main(String[] args)
    	{
    		Parent parent = new Child();
    		parent.name= &quot;abcd&quot;;
    	}
    }

If I make a child object like

    Child child = new Child():
Then `child` object can access both `name and salary` variables.

My question is:

    Parent parent = new Child();
gives the access of only `name` variable of Parent class. 
So what is the exact use of this line??

     Parent parent = new Child();

And also when it is using dynamic polymorphism then why the variable of child class is not accessible after doing this

    Parent parent = new Child();

Why do we assign a parent reference to the child object in Java?

I am working on a project, and am currently working on implementing some logging with log4j and I was curious about how I should go about implementing the logs. The two implementations I am kicking around are as follows:

**First Option** 

Use single log from super class for that class and all sub classes:

    public abstract class AbstractFoo {
        protected static Log LOG = LogFactory.getLog(AbstractFoo.class);
    
        ...
    }
    
    public class Foo extends AbstractFoo {
        public void someMethod() {
            LOG.info(&quot;Using abstract log&quot;);
        }
    }

**Second Option** 

Use individual logs for each class, super and subs:

    public abstract class AbstractFoo {
        private static Log LOG = LogFactory.getLog(AbstractFoo.class);
    
        ...
    }
    
    public class Foo extends AbstractFoo {
        private static Log LOG = LogFactory.getLog(Foo.class);        

        public void someMethod() {
            LOG.info(&quot;Using own log&quot;);
        }
    }

What makes more sense and why?

Java Logging With Abstract Classes

So if I have a class:

     class Person(object):
    &#39;&#39;&#39;A class with several methods that revolve around a person&#39;s Name and Age.&#39;&#39;&#39;

        def __init__(self, name = &#39;Jane Doe&#39;, year = 2012):
            &#39;&#39;&#39;The default constructor for the Person class.&#39;&#39;&#39;
            self.n = name
            self.y = year

And then this subclass:

     class Instructor(Person):
    &#39;&#39;&#39;A subclass of the Person class, overloads the constructor with a new parameter.&#39;&#39;&#39;
         def __init__(self, name, year, degree):
             Person.__init__(self, name, year)

I&#39;m a bit lost on how to get the subclass to call and use the parent class constructor for `name` and `year`, while adding the new parameter `degree` in the subclass.

Calling a parent class constructor from a child class in python

Is it possible in C# to explicitly convert a base class object to one of it&#39;s derived classes? Currently thinking I have to create a constructor for my derived classes that accept a base class object as a parameter and copy over the property values. I don&#39;t really like this idea, so I&#39;d like to avoid it if possible.

This doesn&#39;t seem like it should work (object is instantiated as new base, so memory shouldn&#39;t be allocated for extra members of the derived class) but C# seems to allow me to do it:

    class BaseClass
    {
      ... some stuff ...
    }

    class DerivedClass : BaseClass
    {
    	public bool MyDerivedProperty{ get; set; }
    }


    static void Main(string[] args)
    {
    	BaseClass myBaseObject = new BaseClass();
    	DerivedClass myDerivedObject = myBaseObject as DerivedClass;
	
    	myDerivedObject.MyDerivedProperty = true;
    }

Convert base class to derived class

I have an application based on Squeryl. I define my models as case classes, mostly since I find convenient to have copy methods.

I have two models that are strictly related. The fields are the same, many operations are in common, and they are to be stored in the same DB table. **But** there is some behaviour that only makes sense in one of the two cases, or that makes sense in both cases but is different.


Until now I only have used a single case class, with a flag that distinguishes the type of the model, and all methods that differ based on the type of the model start with an if. This is annoying and not quite type safe.

What I would like to do is factor the common behaviour and fields in an ancestor case class and have the two actual models inherit from it. But, as far as I understand, inheriting from case classes is frowned upon in Scala, and is even prohibited if the subclass is itself a case class (not my case).

**What are the problems and pitfalls I should be aware in inheriting from a case class? Does it make sense in my case to do so?**

Scala case class inheritance

I used the second solution of
[https://stackoverflow.com/questions/179927/how-to-resolve-could-not-find-schema-information-for-the-element-attribute-xxx][1]

I.e. created a XSD with the button to create a scheme. I changed the stylesheet in app.config to app.xsd but now I get the warning:

   The Global element &#39;configuration&#39; has already been declared in app.xsd

Even when changing the name the warning is shown.
Does anybody have a solution for this?



  [1]: https://stackoverflow.com/questions/179927/how-to-resolve-could-not-find-schema-information-for-the-element-attribute-xxx

Fix: The Global element &#39;configuration&#39; has already been declared

I am creating a website, but when I made changes to the stylesheet on my site, and I refreshed the site, none of the changes were there.

I tried to use the view source tool to check the `stylesheet.css` and it isn’t updated either. But when I go to the root of my system it is.

I have to wait at least 20 minutes before I see the update on my site, can anyone tell me why I don’t see changes right away? Is something wrong with my browser, computer, or server?

I also tried deleting my cookies, cache, and history but it still didn’t work.

Stylesheet not updating when I refresh my site

The following style is just an example of how to set transitions in CSS3. &lt;br/&gt; Is there a pure CSS trick to make this play in loop?

    div {
        width:100px;
        height:100px;
        background:red;
        transition:width 0.1s;
        -webkit-transition:width 0.1s; /* Safari and Chrome */
        -moz-transition:width 0.1s; /* Firefox 4 */
        -o-transition:width 0.1s; /* Opera */
        transition:width 0.1s; /* Opera */
    }

    div:hover {
        width:300px;
    }

How to play CSS3 transitions in a loop?

I&#39;m in London working on an application, and the html/css guy is in New York. He&#39;s sending me updates daily by email as we have no source control set up that we can both use, I&#39;m constantly making small changes to his css, so each time I get a new file from him, I have to reapply all my changes to it, and obviously the more work I do, the longer this takes each time.

I had the idea of making my own seperate stylesheet, but is there a way to tell the browser to give my sylesheet higher priority and overwrite any of his styles that have the same class name and attributes?

This isn&#39;t going to be a public site so we&#39;re only going to be supporting the latest browsers.


Can one CSS file take priority over another CSS file?

I have several SVG graphics I&#39;d like to modify the colors of via my external style sheets - not directly within each SVG file. I&#39;m not putting the graphics in-line, but storing them in my images folder and pointing to them.

I have implemented them in this way to allow tooltips to work, and I also wrapped each in an `&lt;a&gt;` tag to allow a link.

    &lt;a href=&#39;http://youtube.com/...&#39; target=&#39;_blank&#39;&gt;&lt;img class=&#39;socIcon&#39; src=&#39;images/socYouTube.svg&#39; title=&#39;View my videos on YouTube&#39; alt=&#39;YouTube&#39; /&gt;&lt;/a&gt;

And here is the code of the SVG graphic:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    &lt;?xml-stylesheet href=&quot;stylesheets/main.css&quot; type=&quot;text/css&quot;?&gt;
    &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;
    
    &lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 56.69 56.69&quot;&gt;
    &lt;g&gt;
    	&lt;path d=&quot;M28.44......./&gt;
    &lt;/g&gt;
    &lt;/svg&gt;

I put the following in my external CSS file (main.css):

    .socIcon g {fill:red;}

Yet it has no effect on the graphic. I also tried .socIcon g path {} and .socIcon path {}.

Something isn&#39;t right, perhaps my implementation doesn&#39;t allow external CSS modifications, or I missed a step? I&#39;d really appreciate your help! I just need the ability to modify the colors of the SVG graphic via my external stylesheet, but I cannot lose the tooltip and link ability. (I may be able to live without tooltips though.) Thanks!

How to style SVG with external CSS?

I am looking for a plugin or technique that changes a text&#39;s color or switches between predefined images/icons depending on the average brightness of the covered pixels of its parent&#39;s background-image or -color.

If the covered area of it&#39;s background is rather dark, make the text white or switch the icons. 

Additionally, it&#39;d be great if the script would notice if the parent has no defined background-color or -image and then continue to search for the nearest (from parent element to its parent element..).

What do you think, know about this idea? Is there something similar out there already? Examples?



Change text color based on brightness of the covered background area?

Is there a way to use Sass or Compass or anything like that without Ruby? 

I have been looking around google and this site and can&#39;t find anything, any help would be appreciated. Thank you

Sass or Compass without ruby?

I have this variable:

    $gutter: 10;

I want to use it in a selector like so SCSS:

    .grid+$gutter {
        background: red;
    }

so the output becomes CSS:

    .grid10 {
        background: red;
    }

 
But this doesn&#39;t work. Is it possible?

Can I use variables for selectors?

I want to be able to do the following:

    height: 25% - 5px;

Obviously when I do that I get the error: 

    Incompatible units: &#39;px&#39; and &#39;%&#39;.


Sass calculate percent minus px

I have a couple of scss selectors where I use the same amount positive and negative, as in:

    padding: 0 15px 15px;
    margin: 0 -15px 20px -15px;

I&#39;d prefer to use a variable for all the 15px amounts, but this does not work:

    $pad: 15px;
    padding: 0 $pad $pad;
    margin: 0 -$pad 20px -$pad;

The margin amounts convert to positive numbers.  Am I missing something?

Content Type	Original Author	Original Content on Stackoverflow
Question	Dan Tao	View Question on Stackoverflow
Solution 1 - Css	agustibr	View Answer on Stackoverflow
Solution 2 - Css	Mark Ernst	View Answer on Stackoverflow
Solution 3 - Css	ScottS	View Answer on Stackoverflow
Solution 4 - Css	ehab	View Answer on Stackoverflow

Is it possible in SASS to inherit from a class in another file?

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Solution 4 - Css

Does std::string have a null terminator?

Fastest way to check if a string matches a regexp in ruby?

Attributions